Select box to fill remaining space - html

On my form I am trying to have my select box take up the row except enough room to show the button on the same row.
I am after a responsive design, so as I resize the page then of course with size of the select box should resize as well to take into account that size.
I can set a percentage on the select, but as it goes up and down sometimes I end up with a large gap, or the button goes onto a new line.
html
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label" for="droplist">Select item:</label>
<div class="col-xs-9">
<select id="droplist">
<option>Value 1</option>
<option>Value 2</option>
</select>
<button class="btn btn-primary">Action!</button>
</div>
</div>
</form>
css
select {
width: 80%;
}
Is there a way to have both the select and the button on the same line, and the select just resizes with the page?
fiddle; http://jsfiddle.net/sJT6C/

If you insist on the button having fixed width, you can use advanced CSS layouts (flex or grid, now experimental in Firefox) or alter the HTML markup and play with float CSS property as follows.
HTML:
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label" for="droplist">Select item:</label>
<div class="col-xs-9">
<button class="btn btn-primary">Action!</button>
<div class="wrapper">
<select id="droplist">
<option>Value 1</option>
<option>Value 2</option>
</select>
</div>
</div>
</div>
</form>
CSS:
.wrapper {
margin-right: 70px;
margin-top: .5ex;
}
select {
width: 100%;
}
button {
float: right;
}
JsFiddle
In the markup, I swapped the select and the button and wrapped the select in a div with class wrapper. The wrapper is needed to get the select to take as much space as possible, without specifying its width. (If width: 100% is specified without a wrapper, there will be no room for the button.)
The stylesheet tells select to stretch to the full width of its parent, which is .wrapper. The wrapper has no width specified, but as a block element it tries to take as much space as possible. Now we have a select that behaves like a well-behaved block element.
Now the floating part. The wrapper is given right margin of the size of button width (including padding and border). It would be best to ensure that the button never exceeds this size, but I did not focus on that. The button is told to float to the right. Thus it fills the space reserved by wrapper’s right margin. (If I did not swap the elements in markup, the button would move down by the height of the wrapper.)
And yeah, I forgot to mention the margin-top: .5ex of .wrapper. Originally select and button used to have their baselines aligned. My hack breaks this alignment and this margin is quite a poor attempt to fix it. Vertical alignment is a darn complicated thing in CSS and I did not find it important enough to really solve it here.

To add to Palec's answer, if you have a variable width for your button (or buttons), then margin-right will not be an adequate solution. Instead, replace with the overflow attribute:
CSS:
.wrapper {
overflow: hidden;
margin-top: .5ex;
}
select {
width: 100%;
}
button {
float: right;
}
(HTML unchanged from original answer)
JsFiddle
It is important that the button element is placed before the select box. It will not work the other way around (though I have not been able to determine why that is).
Note: this solution (like Palec's) will result in the tab index of the elements being reversed: the button will be tabbed to first, then the select box.

Related

Width of text box jQuery mobile

I have label and text box in jQuery mobile and i am trying to change the width of the text box.
For some reason after i am changing the width, lets say for 60% i am still seeing the rest of the 40% almost transparent.
I am adding also a photo of it in order to be more clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
#sales {
width: 60%;
}
How do i change the width without seeing the extra 40% of the text box?
When using jQuery mobile forms, the inputs are enclosed onto a div which holds the width as 100%. To change the width of your text field, you rather need to change its value of the parent, not from the input itself.
You can achieve this with jQuery:
$('#sales').parent().width($('#sales').parent().width() * .4);
The above code is setting the width of the parent div to 40% of its actual value. Here is an example fiddle: https://jsfiddle.net/qctddeza/
.width() function reference
.parent() function reference
Edit:
You would be able to do it with CSS only, but not selecting with an id, as you cannot get the parent of the input element. A general styling can be seen here.
Code taken from W3Schools.

Placing 2 50% width input elements in a row, understanding box-sizing

I'm trying to place 2 input elements inline with 50% width each. Why do I have to subtract the border width from the input elements even when I use box-sizing: border-box?
http://jsfiddle.net/Nmvk6/
HTML
<form class="form">
<div class="form-group">
<label>Type</label>
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>
</div>
<div class="form-group">
<select class="form-control half-width-form-control">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input class="form-control half-width-form-control" type="number"></input>
</div>
</form>
CSS
.half-width-form-control {
display: inline-block;
width: calc(50% - 2px);
/*width: 50%;*/
/*box-sizing: border-box;*/
}
The problem you have here is related to inline-block.
display:inline-block tells the browser to treat the element as a block with regard to its contents, but as an inline element with regard to its surroundings.
The problem for you here is that the surrounding around the two elements includes some white space. Specifically, you have some white space between the two elements. White space is relevant for inline elements, and thus also for inline-block elements.
In a nutshell, it's as if the two elements were words in a sentence. The white space between them is seen as the space between two words.
What you end up with is 50% width + width of one space character + 50% width.
This is a well-known issue with inline-block, but does trip people up a lot.
The quick+dirty solution is therefore to remove the space -- close up the gap between the end of the <select> and the begining of the <input> so that there is no space there.
Other alternatives include using comments to remove the gap (ugly), styling the container element to font-size:0px;, and various other hacky solutions.
Alternatively, you could throw away the inline-blocks. There are a number of other options which can achieve the same or similar results -- notably float, display:table-cell, and flex-box, but others also exist.
But my suggestion is just to remove the spaces between the two elements. Quick, easy fix.
Two issues:
You need -webkit-box-sizing and -moz-box-sizing if you want to make it work on all current browsers. See MDN page.
There was a space (actually a return and some spaces, but they collapse to 1 space) between the two controls, so the total width was 100% plus the space.
Solution: add the prefixed properties and remove the space from the markup.
http://jsfiddle.net/Nmvk6/7/
Specify
float:left
And it fixes it.
http://jsfiddle.net/Nmvk6/8/

CSS float and markup order - Can I have my cake and eat it?

I'm creating a responsive ecommerce site and I'm designing a modal dialog for adding things to the basket. I want my markup to be in this order:
<div class="modal">
<div class="item"><!-- Product info --></div>
<div class="quantity-discounts"><!-- Details of quantity discounts --></div>
<div class="add-to-basket">
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ...and so on -->
</select>
Add to basket
</div>
</div>
On large screens I want the .item and the .quantity-discounts div to be on the left and then the .add-to-basket section floated to the right.
I want to maintain the order of the divs because on small screens they won't float side by side, they will stack in the order they appear in the markup which is exactly what I want.
The problem
For reasons I don't fully understand the .add-to-basket div is floating to the right but only after the .item div therefore leaving a gap the height of the .item div above it. The only way of getting it to render how I want is to put the .add-to-basket div 2nd in the order of divs but then when they stack on small screens the quantity discounts will be shown under the add to basket button which is not what I want.
I've done a stripped back version as a jsfiddle http://jsfiddle.net/2g9TA/1/
CSS
CSS wise I'm floating .item and .quantity-discounts to the left and setting their width at 66% with a 2% right margin. I'm then floating .add-to-basket right and setting it's width at 30%.
What I've tried
I've tried adding a negative margin to .add-to-basket but because the site is responsive and fluid this margin alters in relation to everything else whether I set it in percentages or pixels.
I'm now out of ideas.
You should add position: relative; in .container and add position: absolute; right:0px; in #div3 and remove float:right;. It will give you your required thing.
DEMO

Input elements right next to each other, covering whole container width

Not the most self explanatory title I've ever authored.
What I'm trying to do (see this fiddle) is for the text field and button to remain positioned right next to eachother (no margins), with the button to the right, and thetext field covering 100% of the remaining width of the container that the button isn't occupying. The relationship between the two should remain even if the containing element is resized.
Browser requirements: IE9+, Firefox, Webkit
Check out this little demo: little link. The code is pretty-self explaining, but here's the basic idea:
<div class = "container">
<div class = "cell">
<input type="text" placeholder="Glee's awesome!" />
</div>
<div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
<button type="submit">Glee</button>
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
Hope that helped!

How to not wrap contents of a div?

I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
How can I force the div to expand so that both buttons are on one line?
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.
Didn't need to toy with max-width, max-height, white-space, or anything else.
Hope that helps someone.
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
Here is an example:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflow property for the chunk of the content outside of the parentDiv border.
Good luck!