I'm trying to use a library bootstrap selector but i have an issue with the class input-group which contains "display inline-table". selected words go out of input field. I want to keep this class without modify "display inline-table"
I tried some display initial or block on children but its not working.
Without class "input-group"
With class "input-group" but field grows
Thx for help.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="container">
<div class="col-sm-12 col-md-2">
<div class="panel" id="liste_diffusion">
<label> test </label>
<div class="input-group">
<select class="selectpicker" data-style="btn-primary" multiple>
<option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
<option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
<option>HTML HTML HTML HTML HTML HTML </option>
</select>
</div>
</div>
</div>
</div>
I add informations to resolve the problem :
what's happening with max width 70% :
.bootstrap-select{
max-width: 70%;
}
Without selected elements :
With selected elements field continues to grow :
I cant use px for responsive size.
Use this style
.panel .input-group {
display: flex;
}
.bootstrap-select {
flex: 1;
}
.panel .input-group {
display: flex;
}
.bootstrap-select {
flex: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="container">
<div class="col-sm-12 col-md-2">
<div class="panel" id="liste_diffusion">
<label> test </label>
<div class="input-group">
<select class="selectpicker" data-style="btn-primary" multiple>
<option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
<option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
<option>HTML HTML HTML HTML HTML HTML </option>
</select>
</div>
</div>
</div>
</div>
Related
I currently have a small form with 3 elements, a label, input, and button.
I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.
This is the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-auto pb-3 ml-auto">
<form class="form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<button class="btn btn-primary" type="submit" }>Submit</button>
</form>
</div>
#media (min-width: 768px) {
.my-form-inline {
display: flex;
flex-flow: row nowrap;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
<form class="my-form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<div class="form-group mx-sm-3 mb-2">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
One way of achieving this is using Media query in CSS, unless that's not what you are looking for.
In your HTML file add below meta code to head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.
In CSS , use media queries
#media only screen and (min-width: 600px) {
#test{
display: block;
}
}
#media only screen and (min-width: 768px) {
#test{
display: inline-flex;
}
}
Using the text-right class on my form labels, when going responsive, I want the label to left align so it's top-left instead of top-right, however the change to text-align:left does not appear to take effect.
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Bootstrap's text alignment classes are responsive. You don't need any extra CSS.Use text-sm-right text-left...
<div class="form-group row">
<label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Demo: https://www.codeply.com/go/djMd492DHA
Note: The accepted answer is best for Bootstrap 4, but the following will work for Bootstrap 3
That's become !important is set on .text-right
You can also set !important. I might suggest not using the .text-right class and maybe make your own. Using !important to override another !important makes me cringe. I wouldn't recommend it, and I would recommend using !important as infrequently as possible. I can understand why Bootstrap uses it here, though.
I'll give you two options.
Here's what you could do:
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left !important;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Here's what I suggest doing:
#media (max-width: 767px) {
.form-group > label.align-label {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label align-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
JSFiddle: https://jsfiddle.net/va4p7b7e/
I am using bootstrap with jquery chosen from (https://harvesthq.github.io/chosen/
to modify the select input to allow for a more user friendly interface. But whenever I add a select input type in the second column, it adds padding or margin(?) to the first column (as seen by the blue background in the above JSFiddle).
Anyone know why the green background from the first column doesn't fully cover the first column? It should but it doesn't. If I remove the select and button from the second column, everything seems fine.
I can modify the css of the first column by adding padding to the column but that makes it non-responsive since if I resize the browser, it changes how much padding is needed.
Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
Try using flex, give display: flex to parent and flex: 5; flex: 7; to child columns
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue; display: flex;">
<div class="col-xs-5" style="background-color: green; flex: 5;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple; flex: 7;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
<div class="row" style="background-color: blue; line-height:35px;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
Add Line height to define a background then its render proper.
<div className="form-inline">
<label>1.</label><br />
<input type="text" className="form-control" />
</div>
Using bootstrap, why when I do input 100% the form will break?
https://jsfiddle.net/bdw9eyme/
How to make label and input to be at same line and input will fill the rest of the screen?
You shouldn't use a br to create a break here, you can use CSS for that. Also you should either nest your input in the label, or use the for attribute with the label to link to an id on the input.
Making the row flex with the input set to flex-grow: 1 will put the input by the label text, and make the input grow to take up the available space.
input {
flex-grow: 1;
margin-left: 1em;
}
.fw {
display: flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-inline">
<label class="fw">1. <input type="text" className="form-control"></label>
</div>
i think this is what you're looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="form-group">
<label class="col-xs-2">1.</label>
<div class="col-xs-10">
<input class="form-control" type="text"/>
</div>
</div>
</body>
I'm new to working with jQuery mobile forms and CSS. I've build a jQuery Mobile form that is contained in a div and I'd like to be able to adjust the position of the form elements withing the , but am not having any luck so far. Below I have unsucessfully tried to align the "Submit" button with the bottom of the container using CSS. Can any one suggest a good way to do this?
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<style type="text/css">
#submitButton {
position: absolute;
bottom: 0%;
width: 50px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="lr" style="height: 500px;">
<form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
<label for="select-choice-0" class="select">Select Label:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<div id="preview"></div>
<button type="button" data-theme="a"
name="Choose" value="submit-value">Choose</button>
<label for="textarea">Text Area Label:</label>
<textarea name="textarea" id="textarea-a"></textarea>
<button id="submitButton" class="ui-btn-top" type="button"
data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
JQM alters the html and applies alot of classes to your original button. If you inspect the element you can see that it looks completely different. Instead of playing with what JQM created too much you can just wrap the button with another div and position that div. i.e.
<div id="submitBtnWrap">
<button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
Then apply your css to the wrapper div.
#submitBtnWrap {
position: absolute;
bottom: 0%;
width: 50px;
}