Here's my code:
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
CSS:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/jkf2L49e/
I want to put the text "Display:" nearest to the select element. And the select must be right (position) as possible. What is the best way to do this and make it responsive?
You should also make the <select> part of the table layout too, so just wrap it with another <div>. The markup would be like this:
<div class="col-md-12 table">
<div class="left">Title XPTO</div>
<div class="middle">Display:</div>
<div class="right">
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
To align the text to the right, you can simply use text-align:right in the middle cell. The CSS would be like this (with tweaks that asked in the comments below).
.table {
display: table;
}
.table > div {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.table .middle {
text-align: right;
width: 100%;
}
.table select {
width: auto;
}
Updated demo - https://jsfiddle.net/jkf2L49e/4/
Try this complete code:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
.text-right{
text-align:right;
}
Now add this class to the div that contains the text "Display"
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle text-right">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
Try following complete code. It would be best solutions.
<html>
.wrapper
{
width:100%;
}
.leftdiv{
width: 90%;
float:left;
}
.rightdiv{
width:8%;
float:right;
}
Title XPTO
<div class="rightdiv">Display:
<select>
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
Mark answer as right answer if helpful to you.
Related
In a form four properties have to be set by the user. I chose a table like layout:
This layout, however, makes problems on smaller screens. In this case, I would like to have:
and on very small screens:
Any idea? I am using HTML5, CSS3, jQuery 3.3.1 and bootstrap 2.
If I understand it right, you intend use table to make your form stay in a good layout.
it's not recommended this way because you can't rearrange the cell in a table freely. Or should I say, don't use table to make a responsive layout.
Bootstrap grid system is responsive by default so you should make use of it.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
In your case, you can put your element in four div tag like this
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your first element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your second element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your third element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your fourth element -->
</div>
</div>
</div>
I solved my problem with flexbox:
Here my CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-container > div {
margin: 1px;
}
.flex-container > .label {
padding-left: 8px;
width: 20%;
min-width: 100px;
}
.flex-container > .value {
vertical-align: middle;
}
.line-break {
width: 100%;
}
.cond-line-break {
width: 100%;
display: none;
}
#media screen and (max-width: 720px) {
.cond-line-break {
display: inline;
}
}
#media screen and (max-width: 360px) {
.cond-line-break {
display: inline;
}
.flex-container > .label {
width: 100%;
}
}
and my HTML:
<div class="flex-container">
<div class="label">Property 1:</div>
<div class="value">
<select>
<option selected="selected">Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Enter Property 2 here:</div>
<div class="value">
<select>
<option>Value 1</option>
<option selected="selected">Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="line-break"></div>
<div class="label">Property 3:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option selected="selected">Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Property 4:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option selected="selected">Value 4</option>
</select>
</div>
</div>
It works as intended, even with labels of different length.
On my product page, there are a number of attributes depending on how many were added to that specific product. It can be from 1 up to 4. The attributes share a common fieldset class name and this is where it gets tricky for me. Basically I'm trying to position 2 of the fieldsets side by side and the rest below them (also side by side). However, I also want them separated and stick to their respective sides within the container. I've managed to make parts of what I said above happen but I have an issue with making the right fieldsets stick to the right side completely. Here's an image description:
Here's the code so far:
https://jsfiddle.net/26za63sh/
HTML:
<div class="container">
<div class="product_attributes clearfix">
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_2">Choose</label>
<div class="attribute_list">
<select name="group_2" id="group_2" class="form-control attribute_select no-print">
<option value="81" selected="selected" title="Option #1">Option #1</option>
<option value="150" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_6">Choose</label>
<div class="attribute_list">
<select name="group_6" id="group_6" class="form-control attribute_select no-print">
<option value="31" selected="selected" title="Option #1">Option #1</option>
<option value="56" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_5">Choose</label>
<div class="attribute_list">
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
<option value="80" selected="selected" title="Option #1">Option #1</option>
<option value="151" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
</div>
</div>
</div>
CSS:
.container {
width: 400px;
height: 200px;
background-color: gray;
border: 1px solid #dddddd;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
#attributes .attribute_list {
width: 90%;
}
#attributes fieldset {
float: left;
width: 50%;
padding-bottom: 5px;
}
#attributes fieldset:last-child {
float: left;
padding-bottom: 0px;
}
I understand that if I set .attribute_list's width to 100% it will accomplish what I'm trying to do but then the two fieldsets will have no space in the middle. If I instead set a fixed width instead of percentage, then I'll have issues in mobile/tablet view. Any suggestions?
Try this. If you want align items in line and float right.
.attribute-container{display:inline-block;}
.attribute_fieldset:nth-child(odd) .attribute-container{float:right;}
.container {
width: 400px;
height: 200px;
background-color: gray;
border: 1px solid #dddddd;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
#attributes .attribute_list {
width: 90%;
}
#attributes fieldset {
float: left;
width: 50%;
padding-bottom: 5px;
}
#attributes fieldset:last-child {
float: left;
padding-bottom: 0px;
}
<div class="container">
<div class="product_attributes clearfix">
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_2">Choose 1</label>
<div class="attribute_list">
<select name="group_2" id="group_2" class="form-control attribute_select no-print">
<option value="81" selected="selected" title="Option #1">Option #1</option>
<option value="150" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_6">Choose 2</label>
<div class="attribute_list">
<select name="group_6" id="group_6" class="form-control attribute_select no-print">
<option value="31" selected="selected" title="Option #1">Option #1</option>
<option value="56" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_5">Choose 3</label>
<div class="attribute_list">
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
<option value="80" selected="selected" title="Option #1">Option #1</option>
<option value="151" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</div>
The problem is the elements in fieldset all float to left.
Add this to float the inner elements of odd fieldsets to right:
#attributes fieldset:nth-child(odd) * {
float: right;
}
JSFiddle: https://jsfiddle.net/er_han/Lprh9zqf/
Im having trouble removing the space between a centered input type="search" and a drop down select tag.
Here the html and css im using
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
div {
margin: 0;
}
input {
margin: 0;
}
select {
margin: 0;
padding-left:0;
}
Heres a JSFiddle I made
https://jsfiddle.net/ayt9q75e/1/
If I understand you properly :https://jsfiddle.net/ayt9q75e/3/
* {
padding: 0;
margin: 0;
}
div {
font-size: 0;
line-height: 0;
}
input {
display: inline-block;
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
font-size: 14px;
line-height: 22px;
}
select {
display: inline-block;
font-size: 14px;
line-height: 22px;
}
In your current code, obviously there are line-breaks between each line.
With HTML a line-break belongs to "white-spaces", so it's rendered as a space.
You have to suppress those line-breaks to get what you want:
<div id="div" align="center">
<input id="search" type="search" ><span id="span"><select>
<option value="all">All Catigories</option><option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select></span>
</div>
Note that you don't need anything like margin: 0 any more.
Fiddle: https://jsfiddle.net/ayt9q75e/2
HTML:
<div id="div" align="center">
<input id="search" type="search"><span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
CSS:
div {
margin: 0;
}
input {
margin: 0;
display: inline-block;
}
#span {
display: inline-block;
}
select {
margin: 0;
padding-left:0;
}
Important: remove the line break before <span id="span">
And I recommend to use CSS to center the div content instead of align="center"
There is a simple way add a class to the parent div and set font-size:0; this will fix your problem
div {
font-size:0;
}
I'd like to make something of this kind where you can select the fore and background and make it display together. : https://www.control4.com/solutions/products/switches
I do understand some things could be missing and I have tried to look around. I'd appreciate any help. Many thanks.
<div class="foreground">
<h4>Button Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/button/white.png" selected>White</option>
<option value="switch/button/snowwhite.png">Snow White</option>
<option value="switch/button/biscuit.png">Biscuit</option>
<option value="switch/button/lightalmond.png">Light Almond</option>
<option value="switch/button/brown.png">Brown</option>
<option value="switch/button/black.png">Black</option>
<option value="switch/button/midnightblack.png">Midnight Black</option>
<option value="switch/button/aluminum.png">Aluminum</option>
</select>
</div>
<br>
<div class="background">
<h4>Faceplate Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/faceplate/white.png" selected>White</option>
<option value="switch/faceplate/snowwhite.png">Snow White</option>
<option value="switch/faceplate/biscuit.png">Biscuit</option>
<option value="switch/faceplate/lightalmond.png">Light Almond</option>
<option value="switch/faceplate/brown.png">Brown</option>
<option value="switch/faceplate/black.png">Black</option>
<option value="switch/faceplate/midnightblack.png">Midnight Black</option>
<option value="switch/faceplate/aluminum.png">Aluminum</option>
<option value="switch/faceplate/satinnickle.png">Satin Nickel</option>
<option value="switch/faceplate/bronze.png">Venetian Bronze</option>
<option value="switch/faceplate/stainlesssteel.png">Stainless Steel</option>
</select>
</div>
<!-- style -->
<style type="text/css">
.background {
position:absolute;
z-index:1;
left:125px;
top:125px;
float: right;
}
.foreground {
position:absolute;
z-index:auto;
float: left;
}
#switch{
position: relative;
}
</style>
If you notice, those images are png and of same dimensions with perfectly positioned switch and background. so displaying one div inside another will overlap it perfectly as the snippet below
Something with jQuery, should get you going....
$(document).ready(function() {
$('#switchSel').change(function() {
var switchPic = $('.switch');
switchPic.removeClass();
switchPic.addClass('switch ' + $(this).val());
})
})
.back {
background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png);
height: 575px;
width: 361px;
display: inline-block;
}
.brown {
background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png);
height: 575px;
width: 361px;
}
.black {
background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png);
height: 575px;
width: 361px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="switchSel">
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</div>
<div class="switch black">
<div class="back">
</div>
</div>
My labels keep appearing above the selects. I want them all on the same line. Pls see the jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/
<div class="well well-sm">
<form name="myForm" role="form" novalidate="novalidate" class="form-inline">
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select ng-model="form.cband2" id="cband2" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<button class="btn btn-primary">Filter</button>
</form>
</div>
There's a CSS rule in bootstrap that sets the width of .form-control to 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:
.form-control {
width:auto;
display:inline-block;
}
Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/
You have to wrap your label around the select. Like this:
<div class="form-group">
<label>C-Band
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</label>
</div>
And then add the following CSS:
.form-group label {
float: left;
text-align: left;
font-weight: normal;
}
.form-group select {
display: inline-block;
width: auto;
vertical-align: middle;
}
Here is your updated fiddle: Updated Fiddle
form-inline class with form-group will do the job like
<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>
<select class="form-control" id="rotit">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</div>
demo : http://jsfiddle.net/9arahevn/2/
This problem is so recorrent that there is a Github project solving it
https://fk.github.io/select2-bootstrap-css/
Place their CSS file right after the CSS from Select2
<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">
Then you can use the label along with the select
<div class="form-group">
<label for="sName">Select Title</label>
<select class="js-example-basic-single form-control" id="sName">
</select>
</div>
It does work if you use the latest bootstrap:
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)
The issue was with css for
#media (min-width: 768px)
.form-inline .form-control {
//old bootstrap
display: inline-block;
// new bootstrap
display: inline-block;
width: auto;
vertical-align: middle;
}