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
Related
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:
I cannot change the grey text to yellow when a dropdown is clicked in a collapsed view. I have the example at http://www.bootply.com/zGzMrrmrWL
My code is all over the place because I have just been throwing things in to see if they work! I'm at that kind of desperation state! Can anybody show me what I haven't done? I simply want all the text to be yellow, whether it is in a dropdown or on the main menu
You need to have..
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {color:#FFFF00; font-size: 18px;}
in your CSS overrides to the specificity of .dropdown-menu>li>a isn't enough to override Bootstrap's CSS that is changing the color to grey.
http://bootply.com/GKs5h2XiZc
With Bootstrap3, stacking of radio buttons text is not happening properly in mobile(xs) view- bootply.
Screen shot:
As can be seen, text is not properly aligned to radio buttons in mobile(xs) view.
It is because of the .jumbotron line-height..
Try this:
.jumbotron {
line-height:20px;
}
http://bootply.com/101503
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;
}
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);