I have created a nested list. When the text of the selected item is quite long than back button overlaps the toolbar title.
Is there any way to align toolbar text to right or set font size??
Any help is appreciated.
You can use only "Back" (or something else) for the back button. You just need to add this config in your nested list: useTitleAsBackText: false (It is true by default).
Else, you can reduce the font size for both button and toolbar title in your CSS file. Like this:
.my-nested-list .x-toolbar .x-button-label,
.my-nested-list .x-toolbar .x-title {
font-size: 13px;
}
Related
I am using the CommandBar Component to display links. (The buttons are href links).
I want to remove the underline from buttons when hover. Is it possible? enter image description here
https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
If you want to remove the underline of a button when hover, maybe you can do something like this
button: hover{
text-decoration: none;
}
Let me know if that worked for you
#Shai According to the image below got from CleanMordern Project.
how can I style my radio buttons using CSS to look exactly as Shai did his,
and also make actions on each button to show different container when pressed
ButtonGroup barGroup = new ButtonGroup();
RadioButton all = RadioButton.createToggle("All", barGroup);
all.setUIID("SelectBar");
RadioButton featured = RadioButton.createToggle("Featured", barGroup);
featured.setUIID("SelectBar");
RadioButton popular = RadioButton.createToggle("Popular", barGroup);
popular.setUIID("SelectBar");
RadioButton myFavorite = RadioButton.createToggle("My Favorites", barGroup);
myFavorite.setUIID("SelectBar");
Label arrow = new Label(res.getImage("news-tab-down-arrow.png"), "Container");
add(LayeredLayout.encloseIn(
GridLayout.encloseIn(4, all, featured, popular, myFavorite),
FlowLayout.encloseBottom(arrow)
));
You can open the theme file in the designer tool and just copy the styling from there. I implemented this using image backgrounds to keep some pixels free for the arrow on the bottom.
If you look at the theme you will see I just placed a background image that's solid red on top and has a white bottom. Then I have a separate "arrow" image which is animated with the code to the selected button on every click. Everything else is just colors and fonts which is trivial.
I have some radio buttons that need text descriptions for each choice so users know what they are choosing.
I would like to add an input field in the radio buttons options for each radio button option that can accept HTML. This then needs to be displayed within each radio list item. I've tried simply adding the details to a HTML area underneath, but this is not suitable for mobile screens as the details are independant from the radio choices and so do not appear under each radio when the screen is re-sized.
Have you considered including the description inside the Radio Button label? If you configure each choice label like so:
<div><span>First Choice</span><span>And this is the description.</div>
You could style it with the following CSS:
.ginput_container_radio input {
vertical-align: bottom;
}
.ginput_container_radio label span {
display: block;
}
.ginput_container_radio label span:nth-child(2) {
opacity: 0.6;
font-size: 0.9em;
}
And it'd look something like this:
here is my image of my gridpanel :
just look at the column curativeTask, here I modified the image plus "+" by css:
.curative-task >:first-child >.x-column-header-trigger{
display:block;
background-image: url('../../resources/images/icon_plus.gif');
}
It will be displayed even the user not passed the mouse over it by using "display:block",
Now my probleme is : if I want to clik on this icon I want to do other things but if I cliked on it it show me the menu like this :
In this case I want to elemenate to show this menu and do other things. I done menuDisable:true but the icon it won't be displayed even I made "display:block".
So how I Do this else where is others idea ?
http://i.stack.imgur.com/fRhy8.png
Thanks.
I want the disclosure button to be visible on each of the items of the list only when i click an "EDIT" button. How can i do that?? I tried "list.setOnItemDisclosure(true);" on clicking the EDIT button but disclosure didn't appear.
Just create a css class where the x-item-disclosure would be hidden :
.hidden-disclosure-list .x-list-disclosure {
display: none;
}
Then when you want to hide them you just have to do:
list.addCls('hidden-disclosure-list');
And when you want to display them just do:
list.removeCls('hidden-disclosure-list');
Hope this helps
Manipulate the list's on item disclosure property...On click of the edit button toggle the list's onItemDisclosure property...
list.setOnItemDisclosure(true);