I have 2 modals that I'd like to style differently at the modal-dialog level. I'm not sure how to do it. It seems that if I apply a style that I think should only apply to one, it applies to both of them. One modal template is passed as an HTML string, the other is passed as a script/ngTemplate that is part of the partial page that the controller runs on, if that difference matters. The one that is passed as a string has an ID on the root div, and the CSS that is applied to that doesn't seem to work. But if I have just a .modal-dialog in my css, that is applied to both modals, as I would expect it to. In the Chrome debugger, the #ErrorModal selector is greyed out, so it does see it, it's just not applying it, even with an !important, and I'm not sure why. When either modal is displayed, the HTML looks similar, in that the one that uses the template doesn't contain any of the classes from the parent div that it's wrapped in. One of the main things I want to do is set the background-color of the error modal to white, but leave my other one opaque.
I've looked at this question, but I don't know that it will let me apply styles 'above' the template.
My css-fu isn't very strong, nor is my Angular, but it seems like the specificity should make it apply.
Any ideas?
Turns out there is an option you can pass to the modal, windowTemplateUrl. I haven't found great documentation for it, but I was able to cobble something together using this question as a springboard.
Related
At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.
This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.
This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.
Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan
When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.
Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.
Thanks a lot :)
scroll-margin is not useful if scroll behavior is controlled by JS
Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).
It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.
What to do?
I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.
I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.
scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.
Sometimes we see some text gets cut from the viewport such that it's half visible.
To avoid that kind of thing scroll-margin-top is helpful.
when no scroll event happens:
when scroll event happens but with scroll-padding-top:20px;
see an example from MDN Web Docs
Now applying this logic to your link example
When we click on the link it takes us to the specified div,
But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element:
When we apply scroll-margin-top we get the desired output on the link click event or scroll event:
a{
font-size:30px;
text-transform:capitalize;
}
#down{
scroll-margin-top:30px;
background-color:royalblue;
height:100px;
width:50%;
}
<center>
down
<section style="height:1000px;"></section>
<div id="down"></div>
<section style="height:1000px;"></section>
</center>
See Output
Correct me if I am wrong anywhere.
I'm looking for an easier way to get all the styles applied to a particular element so that I can re-use them in my project.
I've checked the chrome tool and there is lots of clutter on the right side of the selected element.
Is there any extension or hack to get styles for an element quickly?
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
Note: I've tried searching on google, but couldn't find what I was looking for.
Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?
I've made a quick example:
form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png
As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.
So how do you do this? A link to a css stylesheet with all the needed styles would be fantastic.
Short answer: you can't.
Long answer: you can, but expect pain.
I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.
It wasn't that fun but the result is passable.
I do not look forward to seeing the mess IE makes of it though :)
I had inspiration from:
http://sourceforge.net/projects/selectreplace/?showfeed=code
This is an old question now but adding the CSS rule -webkit-appearance:none may help remove default Webkit styling, e.g. pill shaped buttons on Mobile Safari.
I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.