I have a weird styling problem that does not seem be resolved no matter what I do. When I inspect the page and look at the elements I can see the 'width' of the div is correct but the actual select does not go to the correct width even tho I have data-width set and you can see it in the inspect tool also.
Here is the code:
<div class="search-box search-box-dark">
<form asp-action="post">
<div class="select-default">
<select
name="scale"
id="scaleID"
class="selectpicker"
data-width="100%"
asp-for="scaleId"
asp-items="Model.scl"
data-live-search="true">
<option value="">Choose Scale</option>
</select>
</div>
Adding form-control to the class also makes the div go to the correct width with a background but the 'button' that is visible in the inspect tool is not wide engough.
Try removing
'''class="select-default"'''
from div and see if select width property works!
Related
I'm having a graphical problem with a select box in a page of my website.
The problem is that the option elements of the select is showing inline instead as a drop-down selection. This strange behaviour becomes only if I render the select element inside a form element. (??I don't know why??)
The HTML output produces:
<form name="add-user-form" method="POST" action="/index.php/admin/happen/add"><p><select name="day" required><option value>d</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</p>
</form>
is a valid html5 markup, checked on w3c website.
this is an image showing the problem..
I omit the php code for now, somebody know this problem?
As we said in the comment, the issue is due to a CSS class using the following :
form[name] * {
display: inline-block;
}
I have this dropdown list but problem is when i run it in IE it goes up and down if i select something from bottom or middle.How can fix so that it expand it always bellow:
https://jsfiddle.net/tq1bhfno/ (you need to run it in IE)
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
</div>
Drop-downs are rendered by the Browser/OS. You cannot control this type of behaviour using CSS or JavaScript.
What about the dropdown itself?
As in, the thing that shows the choices when activated. As far as I know, there is no way to style these in any browser. Not even bold or italic. The closest thing to style you can get is grouping them by using . This is probably mostly a UI thing, but it might be a security thing too. You wouldn't want people doing tricky things with fonts that make it unclear what option is selected.
Read More About Dropdown Default Styling
See the behavior without any CSS:
https://jsfiddle.net/tq1bhfno/2/
Only the HTML:
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
It is the same.
bottom: 100%;
add this attribute to your css for dropdown. This forces to show everything below.
I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<select class="btn">
<option>USD</option>
<option>GBP</option>
<option>ZAR</option>
</select>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<div class="btn btn-default" type="button">Button</div>
</span>
</div>
</div>
It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):
but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:
I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:
The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.
If I remove the select element, it displays fine, so is there something wrong with how I've defined that?
try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");
I have a load of wizard controls and I need to slightly modify the html it is spitting out around the navigation. Currently I have the below..
<div class="nav">
<input type="submit" value="Back" class="secondary" id="FinishPreviousButton" name="FinishPreviousButton">
<input type="submit" value="Submit" class="primary" id="FinishButton" name="FinishButton">
</div>
I have added my desired classes to the buttons, primary and secondary, but i cant seem to work out how to change the containing div's class from nav. I've already tried .NavigationStyle.CssClass but that isnt doing the trick.
Any ideas?
My bad, NavigationStyle.CssClass was getting overridden. Sorted now.