I see in Firebug that my style (background-color) is apparently on the element in html view, but not in element.style in the style tab. In the document I do not see the effect of the style, however if I manually add it in the style tab on a class that is present, it works.
How can this be?
I have !important on the style on the element, and don't see anything that could override it
Edit, even with the value stated literally here, no dice:
<div class="fl oh rounded" data-bind="attr:{style:'display:block, background-color:#ff0000 !important;'}">
However, this works.
<div class="fl oh rounded" style="background-color:#ff0000 !important;">
So, if I add the style inline and not in a knockout binding, it works... However, I can see that the binding is working as the bound color appears in the html in firebug (but not in element.style in the style tab, but the ko bound color is not seen)
I have no idea why, but it was that out-of-place looking display:block that caused this oddity.
Related
I am trying to change the background color of a div using ng-repeat. The color I am trying to pull from the object in the loop. Whenever I do this however it sets my style property equal to blank.
Here is the code that I am using:
<div ng-repeat="channel in channelObjects">
<div class="mediumTile" style="background-color:#{{channel.Color}}">
Channel Color: {{channel.color}}
</div>
</div>
This displays my mediumTile object with the correct channel color displayed. By the style is set to nothing once the page loads
This is what the page displays:
<div class="mediumTile" style="">
Channel Color: 123456
</div>
Am I doing something wrong?
You should use ng-style instead of style, using style with interpolation will cause some browsers to strip the values off (invalid style attribute with the presence of {{ etc..) before even angular has a chance to process it. This happens specifically in IE (not sure which browser you tested this).
<div class="mediumTile" ng-style="{'background-color':'#' + channel.color}">
Also mind the casing as well, color.
Plnkr
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
How can I find the source for some CSS styles being applied to my page in IE8? Specifically, my <legend> is orange and has a size of about 1px unless I set a style on it (even on the <fieldset> doesn't work)
EDIT :
Here is an example to show what I mean. The markup is:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>test1</legend>
</fieldset>
</form>
</body>
</html>
And the result in my IE8 is
If you look closely you can see the tiny orange spec that is the legend.
EDIT 2:
I just noticed that the fieldset has round corners. Is this odd, or am I wrong and this is how fieldsets look in IE?
Hit f12 and you will get the developer tools. Click the arrow button and then click on the element in question. You will get a list of all styles applied to the element and where they are coming from.
The tricky part about background though is that you could have a transparent background on your element and one of its ancestors may have the background color. So you may need to traverse the tree.
You can use the DOM inspector of Firebug Lite.
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.
I don't know how strong the support of RadControls over here is, but it can't be worse than Telerik(there I'm lucky to get a response in 2-3 days), so I'm going to try here first.
Basically, I'm trying to do custom theming(using just CSS classes) throughout my application, so I tried setting the CSS classes needed on the telerik RadTab controls.
Well, when inspecting it in firebug, it adds an extra like 50 px of padding to each tab, which there seems to be no control over. This is their rendered markup
<li class="rtsLI rtsFirst">
<a href="#" class="rtsLink ui-state-default"> <!--This is the only place where I can put in my own custom CSS class-->
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
Common Application
</span>
</span>
</span>
</a>
</li>
Now, I know you can't see the style classes, but according to Firebug, every class prefixed with "rts" has the line padding-left: 9px in the style sheet which would of course explain the extra padding problem. (Why do they need all this nesting anyway?!)
Anyway, I would like to remove that padding. How would you do this? Also, is there some way jquery could help to remove the padding?
If you know which setting you need to change for which classes, then the best thing to do would be to build an own style sheet with those instructions, and include it after the original stylesheet.
The important thing is to specify the classes exactly as you see them in the original style sheet, because the more specific a rule is, the more weight it has when the browser determines which settings overrule which.
This is slightly more work than doing a simple .className xyz { padding-left: 0px !important } but much, much better for maintenance. Plus, IE < 8 doesn't respect important.