In angular.js, I'm trying to apply a set of classes based on the value of a variable on $scope. But when I set a pair of space-delimited classes, ng-class seems to be removing any that are already present (and it doesn't put them back).
See the Fiddle here: http://jsfiddle.net/fLf0fenj/
Try clicking any of the gray buttons. An icon will appear. It's one from Font Awesome, and the class is fa fa-whatever. Now click another of the gray buttons. The icon should turn into another Font Awesome icon, but instead of that element having two classes (fa fa-something-else), it just has the fa-something-else, so it looks like a square.
If you instead click a gray button, and then the green button, it's all fine. Because that green button uses a glyphicons icon, and so the class names are all being switched out each time.
How do I get around this behavior?
Try
ng-class="statusIcon()"
And here's a working fiddle
Related
I have a component that contains an md-autocomplete. This component is essentially being used as a searchable select list.
So, I'd like to change the icon of the clear-button from the 'X' to a down arrow.
I've tried the solution mentioned here, but that doesn't work for me, because I need the button to remain clickable.
Is there a way I can override the button styling in the component's CSS to specify a different icon to be used?
I'm using a bootstrap tooltip within an angular ng-repeat - its ok except I cant see how I can change the position of the actual tooltip, by default it will popup centred above the icon but I'm looking to have it left aligned from the icon - see image to see what I mean...
how to change bootstrap tooltip alignment
I cant hardcode it as such, as it will be available on separate columns on the same row, so I cant say in CSS its 80px from the left of screen ...typically (its never that easy)...
:-)
if you have any advice...appreciated- thanks
try use attribute "data-placement", Example:
Hover
Here doc tooltip Bootstrap:
http://getbootstrap.com/javascript/#tooltips
How do I set the color of the radio button's control? No matter what color I specify in the style, it draws the outer circle and inner bullet in black. I want it to draw in in white on a black background to match my theme, but it always draws in black. (I'm actually doing this in a Multi-Button, setting the color of the Emblem UIID.)
I tried the first suggestion, to define the constants. That didn't work. Here's what happened.
I tried it two ways. First I defined just the radioSelectedImage and radioUnselectedImage. When that didn't work, I added both the radio*DisImage values, but it did the same thing. The selected and unselected images worked fine, but as soon as I touched a radio button, it got the focus, and the button was drawn in black, which made it invisible against my black background.
I did find an approach that worked, but it required the use of two deprecated classes. Here's what I added to the init() method of my main class:
LookAndFeel lookAndFeel = UIManager.getInstance().getLookAndFeel();
if (lookAndFeel instanceof DefaultLookAndFeel) {
DefaultLookAndFeel defaultLookAndFeel = (DefaultLookAndFeel) lookAndFeel;
Image sel = theme.getImage("RadioButtonSelected.png");
Image unSel = theme.getImage("RadioButtonUnselected.png");
defaultLookAndFeel.setRadioButtonImages(sel, unSel, sel, unSel);
defaultLookAndFeel.setRadioButtonFocusImages(sel, unSel, sel, unSel);
}
The difference here is that I have a way to set the focus images. I can't do that using the constants, which is probably why it doesn't work. I'd really rather not use deprecated classes.
There are theme constants to allow you to add images to the radio button for unselected, selected, etc. Look here...
https://www.codenameone.com/manual/advanced-theming.html
I'm having some troubles doing a very simple MenuButton. When I use a MenuButton the icon comes after the label (I mean right), instead of being left to it, as in qx.ui.form.Button.
Is there a simple way to put this icon in the right place ?
MenuButton inherits from Button, which has a property iconPosition - API docs here. Just set it to wherever you want your icon to appear.
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.