I am working on select-like control that is built with Bootstrap's dropdown component. You can look at it here. Selected options are marked with ok glyphicon.
I am facing rather strange problem. Steps to reproduce:
Open dropdown and select some options
Note that all text labels are aligned equally
Close and open dropdown again
Text in previously selected options is slightly shifted.
Tested in Chrome 54/55.
Any ideas? Thanks in advance.
This is due to inline-block property. Use display: flex property on li.selected. Like:
li.selected {
display: flex;
}
I've updated your Plunker code. Please have a look.
Hope this helps!
You can try this:
.open>.dropdown-menu {
padding: 5px;
}
li.selected {
padding-left: 0px;
}
Working fine for me.
Related
If you have the Last Pass extension installed in chrome it displays a ... on the right side of certain input fields.
I was wondering: Is there a way to hide this with css?
You can also hide the icon by adding this attribute to the input element:
data-lpignore="true"
I figured it out!
I placed this in my input field styles:
background-image:none !important;
background-attachment:none !important;
padding-right:0 !important;
border:1px solid #ABADB3 !important;
Which had an effect, but something was still visible. Placing this in my global styles got rid of it completely:
div[id^=__lpform_] {
display: none;
}
To suppress the icon for an input field like below:
<input type="tel" id="cc-number" autocomplete="off">
I used below css:
img[id^='__lpform_cc-number_icon'] {
display: none !important;
}
input {
background-image: none !important;
}
data-lpignore="true"
^^ no longer works I guess. I am not sure, as it didn't work in my case.
As of 2022 the LastPass icon is placed as a sibling to the input field, so I added this rule to my input container and it worked. 😎
div[data-lastpass-icon-root] {
display: none;
}
I've also faced the same issue, As I am using Telerik RadCombobox and RadTextBox, Last pass icon is displaying in all the server controls.
Tried using below css: jst paste it in the aspx page
div[data-lastpass-icon-root] {
display: none.
}
Its working fine.
RadCombobox having icon lastpass
Radcombobox removed icon using above css
Update NOV 2021
I have noticed that all LastPass widgets got class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
I was just wondering if it's possible to add padding to the select options in select dropdowns in the Twitter Boostrap framework. I've added padding to all my other inputs so the padding on my select options is out of line. I would expect something like...
option {
padding: 0 24px;
}
... to do the trick but this does nothing to a bootstrap select option.
Any help would be appreciated.
Edit:
Here's the jsFiddle:
http://jsfiddle.net/sbmw3egx/
I was able to get the text in the select to be adjusted to the left by setting the text-indent property:
select.form-control {
text-indent: 16px;
}
A bit more about the text-indent property here: http://www.w3schools.com/cssref/pr_text_text-indent.asp
Hope that helps!
Edit: It looks like Chrome/Safari uses text-indent, Firefox uses text-indent and padding-left, and IE makes use of padding-left for select. I'm not sure how you would specify the CSS to make it consistent across all of these browsers.
Assuming you're using the Bootstrap form-control, this first option displayed will take on the style of the form-control CSS class. So you'd need to override form-control too.
option {
padding: 0 24px;
}
select.form-control {
padding: 0 24px;
}
Demo: http://bootply.com/dCJM6I7z5V
This is one of those elements that is difficult to style. Normally I would try to just use simple css but in cases like this (if you really must style it) then I would use a plugin.
http://www.bartos.me/heapbox/ is one example.
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
This site produces an unwanted display in Firefox but fine everywhere else, i've narrowed it down to the display: block - in the element.style for the DIV Slides_Container, but can't seem to edit it no matter how hard I try. Any ideas would be great! Cheers.
While you didn't include any code. Which is very naughty:
.slides_container {
display: inline-block !important;
}
Is what you'll be wanting to add!
I've got a complex form with rather a lot of css on the following page. Most things are lining up the way I would like, but if you scroll down to "Membership Type" you'll see that the label and radio button lists are not lined up nicely like everything else is. I thought at first that perhaps the required asterisk was pushing things down, but I removed it and that didn't seem to be the case. Ideas? THank you.
http://www.craftonhills.edu/Student_Resources/Student_Life/Clubs/Alpha_Gamma_Sigma/Membership_Application.aspx
change the css on line 829 on screen.css with below css
.scfForm ul {
list-style-image: none;
list-style-type: none;
margin-top: 0;
}
screen shot:
I think it is because the radio has default margins. I tried this in google chrome and it pushed the radio button up slightly
#form_767FC5570C444D6F977241A501F3C667_field_EB23079082B64C4F91BAD9F0444872DAscope_0 {
margin-bottom: 2px;
}