I'm making login page and wanted to put icon before select with prepend so it would indicate that you can change language here, when I added it, select width become wrong, it's a little too big on right side (like on screenshot below)
<div class="input-group">
<div class="input-group-prepend offset-2 offset-md-3">
<div class="input-group-text">
<i class="fas fa-globe-europe"></i>
</div>
</div>
<select class="form-control col-8 col-md-6" name="lang" onchange="this.form.submit();">
<optgroup label="Official Languages">
<option value="en" selected="">English (United States)</option>
<option value="pl">Polski (Polska)</option>
</optgroup>
<optgroup label="Community Translations (not checked by us)">
<option value="es">Español (España)</option>
</optgroup>
</select>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<span onclick="window.open(dir+'popup/unofficial-translations','popupUNOFFTRANSL','height=500,width=1000,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');" style="font-size: 1.8vh" class="text-muted"><abbr>Click here to learn more about unofficial translations</abbr></span>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<span style="font-size: 1.8vh" class="text-muted">Change of language will remove written login and password.</span>
</div>
</div>
</div>
</div>
Since you didn't show your code beside your rendered dropdown, I am going to guess your rest HTML structure.
The one problem I see from your code is you don't have .row when using .col-*. You need to wrap your columns with at least a row. Of course, outside of them you should have a .container.
Secondly you have a .container nested within your <select>, and then you do col-12 inside of it. Why? You can safely remove .row and .col-12 if you just want to create a row that takes up 100% width. Bootstrap <div> for example aready does that.
I assume you have a .container as the most-outter class. You shouldn't have another .container nested within another. You only need one container class per section.
After I clean up your code, your example runs fine:
demo: https://jsfiddle.net/davidliang2008/jk7es2c8/22/
Again, we had no idea how your HTML structure looks like, and since you don't show your code, this kind of answer is what you will get. Or even your OP will be marked as off topic, unclear, etc.
Related
I'm making a form-inline using Bootstrap 4, but when I use a button, the position of the button is always at the top of the row, I want the button's position to be the same as the input field's position, which is in the middle of the row.
<form role="form" id="form_tambah_kriteria" class="margin-bottom-0">
<div class="form-row">
<div class="form-group col-md-4">
<label>Tipe Decision Maker</label>
<div class="input-group">
<div class="input-group-append"><span class="input-group-text"><i class="ion-ios-contacts"></i></span></div>
<input type="text" name="tipe_dm[]" class="form-control" placeholder="Tipe Decision Maker">
</div>
</div>
<div class="form-group col-md-4">
<label>Owned by:</label>
<div class="input-group">
<select class="form-control" name="owner_dm">
<option value="">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<button class="btn btn-danger">Delete</button>
</div>
</form>
The following is Codepen
The simple fix is to wrap the button in a form-group and prefix it with some invisible text ( or <br />). But it would be dead wrong, just a handy hack, because it would simply hide the underlying problem with your codepen.
The proper fix would be to:
use latest stable version of Bootstrap - your pen currently uses v4.0.0-alpha5 which doesn't contain a lot of bugfixes and, among others, does not contain Bootstrap's flexbox classes)
wrap the button in a .form-group.col-md-4
use d-flex align-items-end classes on the .form-row
Working example: https://codepen.io/andrei-gheorghiu/pen/KKKNxZg
Note: until you start using the latest stable version of Bootstrap's CSS, you'll keep running into problems which seemingly don't make any sense, because the version you're using is a pre-release which does not include a lot of what most Bootstrap 4 examples take for granted.
the solution is easy just add <br> before the button Delete for new line...like this:
<br> <button class="btn btn-danger">Delete</button>
You should put the button in the third column grid and use the <br /> .
you should do it as below:
<div class="form-group col-md-4">
<br />
<button class="btn btn-danger">Delete</button>
</div>
How do I make a simple Bootstrap Horizontal Form that looks correct on phone, tablet and computer. Namely I want the combos to be aligned as shown in the example, but I don't want the combos larger than necessary, and I only want a small gap between label and combo. Then when screen size is too small to fit in label and combo I want them stacked.
Specifically the Boostrap example use up the whole 100% width I dont want that, I don't want the combo to be wider then necessary and I dont want a big gap between the label and the combo.
I tried adding col-auto but then the combos no longer horizontally aligned with each other.
I have now tried adding col-[1-12] values for label and combo as described in https://getbootstrap.com/docs/4.1/components/forms/#column-sizing but then it didnt stack correctly when goes to small phone.
I then tried using col-md so the totals less than 12 but it doesn't look right on main screen because now both the label and combo take the same space so they have half the screen each and are nowhere near each other.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>
The problem is that Flexbox doesn't work in rows/columns the way a Table does. You can use col-sm-auto to get each label to shrink-to-fit, but then the labels/inputs won't align vertically down the page...
It sounds like you want to shrink the label column to fit the width of the widest label. This could be done by putting all the labels in 1 column, and inputs in another column, but then each label/input won't stack together on mobile screens.
There's no elegant Bootstrap-only solution to this problem. You can use Tables, CSS grid, or the option described by #Toan Lu in the comments.
Bootstrap Grid option
I'd recommend simply using col-sm-2 or col-sm-3 for the labels (fitting them to approx. the widest label) and text-truncate to ellipsis(...) the overflowing text until they stack vertically on mobile...
<div class="form-row">
<label class="col-form-label col-sm-2 text-truncate">
Label
</label>
<div class="col-sm-3 col-md-2">
<select>..</select>
</div>
</div>
https://codeply.com/go/e3mDrmMv7k
Table option
With this option, the width:1% is used on the labels so that they shrink to the width of the widest. Use text-nowrap to stop the labels from wrapping. Each form row is a d-table-row and each label is a d-table-cell...
.col-form-label.d-sm-table-cell {
width: 1%;
}
<div class="container py-3">
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Genre
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Longer label here
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
</div>
https://codeply.com/go/e3mDrmMv7k (see 2nd option)
The table option makes the divs into tr/td but also works responsively allowing the fields to stack vertically on mobile. Read more on [d-table classes](Yes, part of Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).
CSS Grid option
One other (non-Bootstrap 4) method is using CSS grid. Make the row display:grid Use the fr sizing on the 2 grid-template-columns across the row.
.d-grid {
display: grid;
grid-template-columns: 0fr 1fr;
}
https://codeply.com/go/9Z7Hg2tl1H
Works as expected if you use earlier version of bootstrap css:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/
Is there any CSS selector for selecting a parent div only if it directly contains a select inside ?
Example code:
<div class="top_level">
<input type="radio"></input>
</div>
<div class="top_level">
<input type="text"></input>
</div>
<div class="top_level">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
Suppose I only want to select the third 3rd top_level class div, since it contains a select directly inside it, how would I do that ?
I did try to search around for an answer, but couldn't find any. It would have been a lot easier if parent selection was possible in CSS.
If you're using jQuery, then you can use :has :
$('div.top_level:has(select)')
If you're using only CSS, then the answer is simple : No, you don't have anything similar to select a parent.
You can use :empty pseudo class to check whether your container is empty (excluding line breaks).
You cannot check whether it contains a type of element. But you may be able to restructure your markup to use :empty selector
eg :
<div class="top_level">
<input type="radio"></input>
<div class="list"></div>
</div>
<div class="top_level">
<input type="text"></input>
<div class="list"></div>
</div>
<div class="top_level">
<div class="list">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
</div>
Now you may query like
.list:not(:emtpy) {
// to select all lists that are non-empty
}
I am looking to have the following html render a select box, then a label, then another select box all in one row while using twitter bootstrap 2.0 What css could I add to bootstrap to accomplish this?
<div class="row">
<select class="span4"></select>
<label class="span4">UCA</label>
<select class="span4"></select>
</div>
I ultimately decided on this
<div class="row-fluid form-inline">
<select class="span4"></select>
<div class="span4 pagination-centered">#displayTag</div>
<select class="span4"></select>
</div>
Try taking a look at using the pull-left or pull-right classes.
<div class="row">
<select class="span4 pull-left"></select>
<label class="span4 pull-left">UCA</label>
<select class="span4 pull-left"></select>
</div>