I'm using selectOneMenu JSF 2 and trying to change the width of it is not working.
`<h:selectOneMenu style="width:280px" styleClass="selectpicker"`>
<f:selectItem itemValue="1" itemLabel="A" />
<f:selectItem itemValue="2" itemLabel="B" />
<f:selectItem itemValue="3" itemLabel="C " />
</h:selectOneMenu>`
Only works when I remove the styleClass = "selectpicker"
I've already tried adding the data-width, it also did not work. Any tips?
The selectpicker should be having its own css properties set which is stopping the width style from being applied. Can you paste the properties set inside the selectpicker.
Find a css class of h:selectOneMenu component in inspect element and override it in your custom css file.
Eg.
.selectOneMenuClassName{
width:280px !important;
}
Just find a right class name.
It's not clear what is inside selectpicker css class. To make it work, first selectpicker should be the css class and second there should be no css error inside it. But if you want to change the width for all the selectonemenu on your page, this may be helpful if anybody still needed !
.ui-selectonemenu{
width: 280px !important;
}
.ui-selectonemenu-label{
width: 280px !important;
}
.ui-selectonemenu-panel {
width:280px !important;
}
Related
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
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 don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
So it's detailed here on how to remove the padding on buttons by overriding the class on the page: Can the button padding be adjusted in Jquery Mobile?
But how do I take this:
.ui-btn-inner {
padding: 0;}
And selectively apply it to one button, ie:
<button data-icon="false" onclick="alert('clicked me')">Button Name</button>
Doing anything like this doesn't work:
<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>
Thoughts? Creative solutions?
Thanks
Just set a new class for that button and then change subclass as below.
HTML:
<a href"#" data-role="button" class="myClass">Text</a>
CSS:
.myClass .ui-btn-inner{
padding: 0px;
}
I think I have finally found a solution (been trying to figure it out for a while now)!
Use the 'cascading' part of CSS to help you. If your button uses theme 'a' for instance, you can apply the padding rules of .ui-btn-inner to only buttons with theme 'a'. Just prefix the class you are trying to change, with the themed property.
HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>
CSS:
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{
padding: 0px;
}
As you can see, this means you have to create the rule for each state of the button, otherwise the padding will return for the split second when you touch the button.
Just apply a different theme (such as 'b') to the buttons that should keep their padding. You can go totally nuts with buttons using this type of CSS inheritance.
You can have an unlimited number of themes. I go to theme roller and create a default theme for every letter of the alphabet. Then, just override them with CSS to my heart's content.
This was a big sticking point when I was trying to use jQuery Mobile for a work project. They already had a UI design and I was tasked with making jQuery Mobile match it exactly.
I just wanted the icon to show with no border or background so I used your example, but the icon was shifted up so I used this to reposition it:
.ui-btn-up-mytheme .ui-btn-inner,
.ui-btn-hover-mytheme .ui-btn-inner,
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}
The html markup:
<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
data-theme="mytheme" data-shadow="false" ></a>
I'm using reCAPTCHA, and the textarea for recaptcha_challenge_field is appearing in the middle of the recaptcha box overlapping other things. I found that it's because of this style:
.recaptchatable #recaptcha_response_field {
position: absolute!important;
when I set position to static in Chrome, it looks fine. However, I can't figure out how to overwrite that CSS option.
I tried:
adding this to my own CSS:
.recaptchatable #recaptcha_response_field {
position: static !important;
}
adding another entry in my CSS with the name .recaptcha_text
calling it via div class (wrapping around textarea)
calling it via p class (wrapping around textarea)
adding position: static!important; to the standard <textarea name="recaptcha_challenge_field" ...> tag
However, I can't get my css to overwrite that position: static!important; that comes over with the script:
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
Can someone please help with what I'm doing wrong? Thank you!
From testing here: http://jsbin.com/otihuk/edit#html,live (the test only seems to work in WebKit browsers)
This looks like a simple CSS specificity issue. The reCAPTCHA CSS is loaded after yours, and both your selector and theirs have equal specificity (and both have !important in the declaration), and so because theirs is specified last, it wins.
You can fix it by making your selector more specific than theirs:
#recaptcha_area #recaptcha_response_field {
position: static !important;
}
I've added that in my demo above, and I can see by inspecting the #recaptcha_response_field element that the computed value of the position property is now indeed static.