I'm practising making a form and I would like to position the form elements on the left in the centre of their row sort of how it would automatically be done with a table. Here is some jsFiddle for what i've been attempting so far.
How do I vertically centre the label element for a form?
Give label same height as input filed have & give line-height to your label. Like this:
.element label {
float: left;
font-weight: 700;
height: 30px;
line-height: 30px;
width: 156px;
}
You could use jQuery and setup the position after the elements are loaded. Minor adjustments to HTML (assign IDs):
<div class="element">
<label id="feedback">Feedback: </label>
<select multiple="multiple" name="feedback" size="4" id="selectbox">
<option value="">Option1</option>
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
<option value="">Option4</option>
<option value="">Option5</option>
</select>
</div>
Javascript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var ht = $("#selectbox").height();
var ht2 = $("#feedback").height();
ht = $("#selectbox").offset().top + (ht-ht2) / 2;
$("#feedback").offset({ top: ht });
});
</script>
Strictly CSS (ID assignment on the label)
<div class="element">
<label id="feedback">Feedback: </label>
<select multiple="multiple" name="feedback" size="4">
<option value="">Option1</option>
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
<option value="">Option4</option>
<option value="">Option5</option>
</select>
</div>
And the CSS:
.element select {
height: 200px;
}
.element label#feedback {
margin-top: 85px;
}
Related
I have some code like this:
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
I tried doing the CSS in these ways:
[name="slctr__lvl1"] {
width: 150px;
}
and:
select {
width: 150px;
}
and:
font select {
width: 150px;
}
but none worked. I want it to look like I wrote:
<form>
<select name="slctr__lvl1" style="width: 150px">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
but the CSS seems to have no effect.
You can use CSS Attribute Selectors:
The [attribute="value"] selector is used to select elements with a specified attribute and value.
Try as the following:
form select[name="slctr__lvl1"] {
width: 150px;
}
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
You can also read further on MDN's Attribute selectors documentation.
CSS attribute selector needs HTML tag before attribute
CSS Attribute selector
https://www.w3schools.com/css/css_attribute_selectors.asp
CSS all selector types
https://www.w3schools.com/cssref/css_selectors.asp
have a look to the following example, I tried to make it work as you did, and if you compare my example with yours you will have the difference that why your code is not working
select[name=slctr__lvl1] {
background-color: yellow;
}
select{
color: red;
}
select {
width: 200px;
}
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
PS: I didn't understand what you want to achieve with this.
font select {
width: 150px;
}
I think this is just a typo, You want to add form, not the font I think
Give the select box a class:
.selectBox{
width: 400px;
}
<form>
<select class="selectBox" name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
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>
I want the select options to show up when you press a button but not have the bar showing the selected option to appear inside the button.
This is what i have so far:
<!DOCTYPE html>
<html>
<body>
<button>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
This is what I want it to look like, then I will place an image inside the button
<!DOCTYPE html>
<html>
<body>
<button>
<select style="display: none;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
$("#btn, .close").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper {
display: none;
position: fixed;
width: 100vw;
height: 100vw;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.select-wrapper select {
font-size: 24px;
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
<input type="button" value="close" class="close">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
I encountered similar problem that the dev refused to just use list due to some backend issue.
found a simple cheat to make the select tag show all the options, that look like a dropdown, and then I just toggle the whole select tag. Not exactly what you asking for, but looks like it.
$("#btn, .selector").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper{
display: none;
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</div>
</body>
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;
}