I have a page that uses Bootstrap 4 with a single input control that was working okay. My problem is when I add help it adds it on the same line rather than the next line beneath the control as I would expect.
My suspicion is it that it is a problem with input-group/form-group. Im finding the generally very good Bootstrap documenentation very unclear on how these two things fit together since Im using inputgroups as the field label.
This is the html
<div class="input-group">
<div class="input-group-prepend">
<label for="undoLocation" id="undoLocationlabel" class="input-group-text">
Find songs
</label>
</div>
<select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
<option value="0">
that are currently in the selected locations
</option>
<option selected="selected" value="1">
that were originally in the selected locations
</option>
</select>
<small id="undoLocationHELP" class="form-text text-muted">
When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</small>
</div>
and I have created a jsfiddle.
https://jsfiddle.net/paultaylor/g64v96fy/1/
According to Bootstrap discussion:
Block help text—for below inputs or for longer lines of help text—can be easily achieved with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.
However, you added it to a parent element with a input-group class, by nature will display with the group, inline. Additionally, you used an HTML default inline tag <small> which also displays, by nature, inline.
Per specs:
The small element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text...
Even if you do what's recommended and wrap it in a <p> tag, the parent still defines the style, and input-groups by nature are inline.
So, it's recommended to move it outside of the div.
<div class="input-group">
<div class="input-group-prepend">
<label for="undoLocation" id="undoLocationlabel" class="input-group-text">
Find songs
</label>
</div>
<select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
<option value="0">that are currently in the selected locations</option>
<option selected="selected" value="1">that were originally in the selected locations</option>
</select>
</div>
<p id="undoLocationHELP" class="form-text text-muted">
When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</p>
Related
The code needed is very simple as shown by w3schools:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_select&stacked=h
Just add a label and a class of "form-control"
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
But the result is inconsistent; some borders are black, and some are transparent. It looks weird to me. Is my sense of style just off?
Checking out bootstrap docs it looks like the correct way to do it. Is it supposed to look like that?
I tried for example to add a class and style it:
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control dropdown" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
CSS:
.dropdown {
border: transparent !important
}
No effect. What do you think?
Thanks in advance
You've hit a very interesting feature of the internet -- native form controls.
The border that you are encountering is the system styling of what appears to be internet explorer / edges rendering system. This can't necessarily be styled with CSS.
You could recreate the dropdown using CSS / JavaScript, but you would lose a lot of the functionality that inherently comes with that specific control.
For example, when you are on a mobile device the select / option control sometimes becomes a spin wheel / rolodex at the bottom of your view port. You also lose the keyboard / autocomplete functionality when users try to select an item via a keyboard ( I live in Minnesota, when presented with a state dropdown I type M -> selects Maine, I -> Selects (Mi)nnesota.
When developers rebuild this type of control with autocomplete functionality what tends to happen is I type M -> Maine, I -> Idaho.
Ultimately what you choose to do is up to you, but to eliminate some of the border weirdness could actually cause a user experience that is less robust than just letting it be.
As an aside most browsers implement select / option controls differently. See three different browsers below:
A select drop down in my angular 2 app doesn't show my images associated to options, though the images are working when I isolate from select drop down. Some CSS is overwriting my images in select - I can load image but can't display it. Here's my code:
<form>
<select [(ngModel)]="ddselectedStatus" name="statusselect" style="width:320px;" (ngModelChange)="onStatusChange($event)" class="col-xs-8 form-control">
<option value="">--Select Status--</option>
<option [ngValue]="i" *ngFor="let i of myOptions">
<img src="images/opened.png" class="rowindic"/>
{{i.name}}
</option>
</select>
</form>
its just a matter of CSS. This should help but keep in mind other CSS may also interrupt,
<img [style.width.px]="50" [style.height.px]="50"
[src]="images/opened.png" class="rowindic" />
I'm using a CMS to try and alter a fundraising form so the text is bigger.
I've managed to alter the paragraph and <h> easily enough but there are some stubborn labels that i cant get to go bigger - here is one - I'd like the words "Payment Frequency" to be 20px or so....
<div class="field select required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
<select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
<option value="">Please Select...</option>
<option selected="selected" value="Monthly">Monthly</option>
<option value="Annually">Annually</option>
</select>
</div>
I have been able to style these individually but there must be a better way, there are loads of them, here is another example:
<div class="field text date required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_DropDownListDay" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_LabelTextBoxCollectionDate">Collection date </label>
I tried styling all "labels" but only the first one changed. the rest stayed the same.
There could be another CSS rule which is overwriting your new CSS rule. You can use the !important to overwrite an already existing CSS rule. See the following:
div.field label {
font-size:20px !important;
}
<div class="field select required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
<select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
<option value="">Please Select...</option>
<option selected="selected" value="Monthly">Monthly</option>
<option value="Annually">Annually</option>
</select>
</div>
Hint: Make sure your CSS rules are included after the CSS files of Frameworks (like Bootstrap or Foundation). This way or using a selector with a higher specificity. These ways should be tried before using !important because using !important is not recommended.
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.
Attached you can see a picture, which is a form that clients should use to contact me. As you can see, the select form is not in the same layout than the others. I want to add an icon as well, but it looks stupid because it is a rect closed to round corners. I have found many ways to change that, but with huge libraries, which I don't need (e.g. http://ivaynberg.github.io/select2/ or http://silviomoreto.github.io/bootstrap-select/)
https://dl.dropboxusercontent.com/u/20731482/contact.png
How can I change the layout and include the icon on the left side easily?
Why don't you use a regular select ?
<div class="input-prepend">
<span class="add-on">#</span>
<select id="inputSelection">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
You can see how it works.