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
Related
I want to add a background color to a dynamic list item of the popup pane of the Thunderbird extension "Check and Send".
popup pane
The content of the first element is the sender address which changes depending on the selection when composing a message.
I found this HTML for this part of the pane in the extension's code
<!-- Identity -->
<div id="identityArea">
<h3 class="titleline-simple" l10n-tag="casPopupIdentity"></h3>
<ul>
<li class="dia_list" id="identityName"></li>
</ul>
</div>
The sender address must be added with JavaScript code which I don't understand.
I want to have different background colors depending on the content of the element.
I can easily address this element with CSS and add a fix background color
li#identityName.dia_list {
background-color: rgb(0,0,206) !important;
color: white !important;
}
but I don't know how I can have different background colors for different sender addresses.
For the elements of a different extension this works:
menuitem[label="name1 <address1#gmx.de>"],
#msgIdentity[label="name1 <address1#gmx.de>"]{
background-color: rgb(0,0,206) !important;
color: white !important;
}
menuitem[label="name2 <address2#gmx.de>"],
#msgIdentity[label="name2 <address2#gmx.de>"]{
background-color: rgb(255,255,0) !important;
}
...
but this does not work for the list element. I also tried value and content instead of label but neither works.
Is there a way to address the list element by its content?
According to the comment of mrmonsieur it is not possible just with CSS.
What is happening in the different extension is that the label attribute is set and that is used in the css with the attribute selector (code in square brackets). If there is any attribute being set containing the address information, you can do something similar, otherwise you have to learn some JavaScript. In particular the .innerHTML property would be handy here.
JavaScript is needed to address the content of the item.
Suppose I want to scrape part of a page to reproduce a particular rendering with, at most, a single CSS.
I can copy the full rendering using browser console commands, but that still produces HTML with classes referencing the CSS stack. E.g.,
<h1 class="x">
<span class="y">Here's a header</span>
</h1>
<div class="z">Here's some more text with a different format</div>
Is there a way to either:
Get all styles expanded inline?
Get all referenced styles defined in a single "computed" CSS block?
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.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
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.