I am facing some issue with Angular Material Dialog.
have few dialog in the application in all the dialog I can see that cdk-global-scrollblock class is getting applied in html tag but in one of the Dialog it is not getting applied.
I am not sure how to fix it as everything looks same as other dialogs.
Can someone suggest what am I missing.
I had the same problem, I found the solution in the forum of the lib I'm using, see if this solves it for you, add it to the modal component
/deep/ .cdk-global-scrollblock {
position: static !important;
overflow-y: hidden;
}
Source: https://github.com/akveo/ngx-admin/issues/2076
Related
I'm using the :focus state to show content, when the parent element has focus. Like so:
.child { display: none; }
.parent:focus .child { display: block; }
Note that the parent element has tabindex="0" set. Is there a way to get this to work in iOS browsers? I'm asking to see if a CSS-only solution is possible, no javascript please.
I've set up a reduced test case fiddle here: http://jsfiddle.net/E8zCU/
An answer that worked for me for a similar problem is here.
As the poster in that thread said, you just have to add
<body ontouchstart="">
to the top of your html code.
I recently launched a landing page for a new website. But on iOS, the inputs fields are ignoring the padding of the container and the subscribe button looks completely different. How can I fix this?
View the landing page: signup.sketchtricks.com
Screenshot on iOS: cl.ly/image/0y0P0m0J3a3X
Thank you for your help, I really appreciate it!
Add...
-webkit-appearance: none;
border-radius: 0;
...to the affected selectors in your css.
I'm using gmaps.js to create map in a site based on twitter bootstrap and the google maps zoom in/ zoom out buttons don't appear. Also I noticed when you click the marker the 'x' close button doesn't appear. Here is the link to the page.
http://www.smileconnectcard.co.uk/FindPractice/SearchResults?location=London%2C%20UK
Any help would be much appreciated.
There is an issue with Bootstrap that conflicts with google maps api. The issue applies max-width:100% to all images. This is acceptable in most cases, but it causes a conflict with google api.
There have been various attempts to fix this and various reverts by the bootstrap developers - https://github.com/twbs/bootstrap/issues/1552.
To fix this so that it only affects the google map I would recomend using the following css
#map label { width: auto; display:inline; }
#map img { max-width: none; }
On inspecting, img tag has max-width: 100%
So try this, it is working.
img {
max-width: none;
}
Maybe happened due to CSS Conflict.
Update: As I suspected, it is a CSS Conflict.
it happened because of your layout.css
img {
max-width:100%; // change it here
}
I have a jsfiddle to show what I'm trying to do: http://jsfiddle.net/n9bSC/3/
The jsfiddle works well and does not demonstrate the bug.
In my actual code, the transfer finishes directly below the target (instead of directly at the target).
I've tried removing the float, adding various "position" styles, etc.
Any thoughts on what could be causing the behavior that I've described?
I don't fully understand this, but I think the problem is fixed.
Our CSS had:
body{
position: relative;
}
So I now change that to "inherit" on the page where I'm doing the jquery-ui transfer effect.
Then, I use conditional CSS for only IE7 to do this:
.joyride-tip-guide {
margin-top: -10px;
}
(I'm using Joyride and noticed that changing the body position messed up the Joyride tour step positioning for Internet Explorer 7.)
I tried adding a jquery-ui datepicker to my website. I downloaded the necessary jquery-ui js components and Smoothness theme css. The problem is that when I add the widget to my site, it looks like this:
Broken datepicker
as opposed to this:
What it should look like
I'm using customized twitter bootstrap as the main style for my site, but it doesn't seem to affect the styling of the widget according to Chrome Inspect element.
Any ideas what could be wrong, or how could I investigate this further?
you need to change the size of your font :
.ui-widget {
font-size: 11px;
}