Setting custom border style and -width affects the height of a select element that contains Bootstrap's form-control class.
However the same class doesn't affect an input element's height with form-control (as expected).
See this fiddle to replicate the following:
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
Height: <span id="textbox-height"></span>
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
Height: <span id="select-height"></span>
</div>
</div>
.border-foo {
border-style: solid;
border-width: 30px;
}
Am I missing/misusing a class here?
Reset selectbox appearance and height value added by bootstrap then it will work as expected, please have a look at the below working snippet, hope it helps :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<style>
select.form-control.border-foo:not([size]):not([multiple]) {
height: auto;
}
.border-foo {
border-style: solid;
border-width: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
<br>
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
</div>
</div>
Related
How can i remove that horrible looking double arrow in select ?
Any other answears about this article that i found doesn't work.
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
Image:
I tried those solutions:
How to remove the arrow in dropdown in Bootstrap 4?
Remove arrows from form element select in Bootstrap 3
Select removing dropdown arrow
How to replace arrow dropdown select in boostrap
Change color and appearance of drop down arrow
but not works.
If you simply want to remove the arrows, you should force apply background style for your custom-select class as those arrows are set as background. Try the below code as reference.
.custom-select{
background: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
Hope this helps
Add this to your CSS file:
.custom-select {
background: none;
}
Change css to:
.custom-select{
background:#fff;
}
As commented above, better off using background-image: none. I've added fields so you can see the effects.
Ensure you adjust the padding to reduce the whitespace that was allocated for the dropdown arrows, otherwise the text will clip in seemingly empty space.
.custom-select{
background-image: none !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-3">
<input type="text" placeholder="some text">
</div>
<div class="col-10">
<div class="input-group">
<select class="custom-select">
<option>Sample text</option>
<option>Second text</option>
</select>
</div>
</div>
</div>
</div>
I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:.
html:
<form class="form" method = "POST" >
<h1>Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container-fluid form-inline">
<input class="form-control" name = "name" type="text" placeholder="Name"/>
<input class="form-control" name = "size" type="text" placeholder="Size"/>
<button class="form-control fa fa-search" aria-hidden="true"></button>
</div>
</form>
css of the element:
input[name="size"]{
width: 50%;
}
Here's a codepen for better context:
http://codepen.io/tadm123/pen/ZLVWpd
I recommend using this method.
<form class="form" method="POST">
<h1 class="text-center">Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container ">
<div class="row">
<div class="col-md-4">
<input class="form-control" name="name" type="text" placeholder="Name" />
</div>
<div class="col-md-7">
<input class="form-control" name="size" type="text" placeholder="Size" /></div>
<div class="col-md-1">
<button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
Updated Codepen:
http://codepen.io/hunzaboy/pen/aJJpMK
It's getting overwritten by the bootstrap defaults. Specifically:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
You need to adjust your selector to fix the cascade:
.form-inline input.form-control[name="size"]{
width: 50%;
}
did you try size attribute?
<input type="text" size="15"/>
The input elements use by default display: inline;, you cannot define a width in elements who using that display, if your change the display to display: inline-block; you will can change the width of your element.
input[name="size"]{
width: 50%;
display: inline-block; /* <--- Here the change */
}
Suppose you have a class-name (defined in HTML) of inputText (name).
Adding these lines will help (clean-way/simple).
.inputText{
//...
width:200px;
transition: width .4s ease-in;
}
.inputText:hover, .inputText:focus{
width:400px;
}
I have a few divs containing form input data. One of them is a select with some placeholder-like text inside of it. I want the select box to be as wide as the text is and I want the other divs to also take up this width.
Here is the html:
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
and here is the css:
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
right now the select drop down is wider than any of the other form-group elements. Is it possible to get all of the form-group elements have the same width and only take up the necessary width for the select to be able to display all of the text?
Here is a fiddle of the example.
EDIT: I don't want to use width: 100% for form-group and I would really prefer not to set the width of form-group at all. I would want it to take up the minimum width necessary to be wide enough for the text in the select.
You can use jQuery's each() function and get the width of each element. Have a look at the snippet below:
var max = 0;
$('.form-control').each(function(i) {
if(max < $(this).width()) {
max = $(this).width();
}
});
$('.form-control').css('width', max);
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
.content {
padding: 20px 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this helps!
A table with table-layout:fixed will solve the issue.
Use a table and put the row divs in table rows
https://jsfiddle.net/9r62L7Lh/5/
.form-group{
display: block;
}
.row{
width: 100%
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
width: 100%;
}
Your Select drop down width will be automatically adjusted to the text width.
Because you have set .form-control{width: 100%;}
If you want the input width be the same like the select width you will have to set a fixed value to all of them
something like .form-control{width: 250px;}
Fiddle
I am looking for a way to make this search bar with its inputs and buttons responsive. However i got stuck with Bootstrap properties and when I shrink the window everything stacks very bad and I just can't figure out how to apply some better classes and props. Here's the codepen link: http://codepen.io/anon/pen/WGKOmB
Appreciate all advices
This is my html:
.row {
background-color: blue;
padding: 40px 30px;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
div.form-group.checkbox {
width: 207px;
background-color: white;
padding: 5px 10px;
}
select.form-control {
width: 173px;
}
input.form-control.choice-input {
/*.choice input input*/
width: 360px;
height: 38px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<!-- row -->
<div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
<p>Lorem ipsum</p>
<div class="form-inline">
<div class="form-group checkbox">
<span><input type="checkbox" value="" checked></span>
<label>Lorem</label>
<span><input type="checkbox" value=""></span>
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control">
<option value="one">Lorem ipsum</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control choice-input" type="text" placeholder="Placeholder text">
</div>
</div>
<!-- end form-inline -->
</div>
<div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">
<p class="pull-right">Lorem ipsum</p>
<div class="btn-group">
<button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</body>
Word from the wise (not me), never use inline styling. Always put everything in CSS. Also, you set a specific height for both the blue box and the light green box. Therefore, even when the browser is narrower and would be in col-sm-* and col-xs-* territory, you still have a set height. You should give a class name, for example form-height and then in CSS write something like the following:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
#media (min-width:768px) {
.form-height {
height: 74px;
}
}
What this would do is say that when the browser is narrower than 768px, i.e. when it is considered col-xs-* by bootstrap, it should have a certain height. When it is larger it will have a different height.
However, an ever better solution is to never even use the height property. The reason you are doing this is probably because you want a certain padding. Therefore, you can write the following CSS for the class:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}
Try this code
<div class="container">
<form class="form-inline" style="padding: 20px 0;">
<div class="row">
<div class="col-sm-8 col-md-9">
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
</div>
<div class="form-group">
<select class="form-control" id="sel1">
<option>Option 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Placeholder">
</div>
</div>
<div class="col-sm-4 col-md-3">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
Demo here : https://jsfiddle.net/adb0br5e/1/
Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.
currently I'm doing something like this, but the sign is out of the inputbox.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.
You probably want this
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Js Fiddle Demo - Basic
Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $ sign, You can add this css as well
.input-group .input-group-addon + .form-control
{
border-left:none;
}
Js Fiddle Demo - Without Border
HTML:
<div class="col-xs-6" >
<div class="left-inner-addon">
<span>$</span>
<input type="text" class="form-control" placeholder="Amount" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<span>$</span>
<input type="search" class="form-control" placeholder="Amount" />
</div>
</div>
CSS:
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 22px;
}
.left-inner-addon span {
position: absolute;
padding: 7px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon span {
position: absolute;
right: 0px;
padding: 7px 12px;
pointer-events: none;
}
jsFiddle
Bootstrap Versions 4 and 5
This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.
To prepend text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="0.00" />
</div>
To append text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="email" />
<div class="input-group-append">
<span class="input-group-text">#gmail.com</span>
</div>
</div>
To change the background color of the added text
.input-group-text
{
background-color:#FFF;
}
You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span. Also you need to add to the input a padding-left value equal to span's width