I have the following html (JSFiddle):
<div id="container">
<div>
<label>Simple label
<input>
</label>
</div>
<div>
<label>Other label
<input>
</label>
</div>
<div>
<label>Variable label
<input>
</label>
</div>
</div>
Is it possible with CSS (I don't want to use JavaScript for this), to fill the remaining space with the inputs? I have variable label length, and I want to align the right side of the input's without float: right (but not to bother also the left alignment).
You can make the label a flex parent and set the input to flex-grow: 1
#container div {
margin: 10px 0;
width: 300px;
}
input {
flex-grow: 1;
}
label {
display: flex;
}
<div id="container">
<div>
<label>Simple label
<input>
</label>
</div>
<div>
<label>Other label
<input>
</label>
</div>
<div>
<label>Variable label
<input>
</label>
</div>
</div>
Related
I want to split my site in two vertical sections. If you click on a left button (width:50%), the content for this button should appear below with width:100% and if you click on the right button the same but of course with content 2.
Is it even possible with pure css? Because I don't know java :/ and I think it's a quite simple problem, isn't it?
#content_button_left,
content_button_right {
display: none
}
#button_left:active~#content_button_left {
display: inherit
}
#button_right:active~#content_button_right {
display: inherit
}
<div>
<div style="display:flex">
<div id="button_left" style="flex:1">Menu left</div>
<div id="button_right" style="flex:1">Menu right</div>
</div>
<div id="content_button_left" style="width:100%">
blabla 1
</div>
<div id="content_button_right" style="width:100%">
blabla 2
</div>
</div>
You can use :target CSS selector to fake the click event but for that you have to convert your div to anchor tag, below is CSS
#content_button_left, #content_button_right{
display:none
}
#content_button_left:target {
display:block;
}
#content_button_right:target{
display:block;
}
Updated HTML
<div style="display:flex">
<a id="button_left" href="#content_button_left" style="flex:1">Menu left</a>
<a id="button_right" href="#content_button_right" style="flex:1">Menu right</a>
</div>
<div id="content_button_left" style="width:100%">
blabla 1
</div>
<div id="content_button_right" style="width:100%">
blabla 2
</div>
I would use radio buttons next to the content and labels for your button targeting the radios. This way you can use the adjacent sibling selector to only show the content next to a checked radio:
/* hide radio and content */
.radio,
.content {
display: none;
}
/* show content if it directly follows a checked radio */
.radio:checked + .content {
display: block;
}
<div>
<div style="display:flex">
<label id="button_left" style="flex:1" for="left-input">Menu left</label>
<label id="button_right" style="flex:1" for="right-input">Menu right</label>
</div>
<input type="radio" name="show-content-radio" id="left-input" class="radio">
<div id="content_button_left" style="width:100%" class="content">
blabla 1
</div>
<input type="radio" name="show-content-radio" id="right-input" class="radio">
<div id="content_button_right" style="width:100%" class="content">
blabla 2
</div>
</div>
I want Text Left and Text right should come in same line and I can't restructure HTML.And if I use Absolute position I am not sure how it will behave in different devices and screen size due to yellow area(). Can I give absolute position with reference to parent div(ms-srch-result)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top" style="display:block;width: 700px;">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 1: (remove inline styles)
#UpScopeLinkTop{
display: block;
float:right;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 2: (flex-box)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
width: 200px;
}
.ms-srch-result div{
margin: 10px;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Solution 3: (flex property)
.ms-srch-result{
display: flex;
flex-direction: row-reverse;
}
.ms-srch-result div{
flex: 1;
}
<div class="ms-srch-result" id="Result" name="Control">
<div id="UpScopeLinkTop" class="ms-srch-upscope-top">
Text Right
</div>
<div id="ResultCount" class="ms-srch-resultscount">
Text Left
</div>
</div>
Use something like this in your CSS stylesheet:
#UpScopeLinkTop, #ResultCount {
width: 45%;
}
(Adjust the value as you need it)
P.S.: erase the 700px width from the HTML tag of #UpScopeLinkTop
You don't need floats. Instead of divs inside the big div, use spans.
<div id="thebigdiv">
<span style="display:inline-block";>
Text left
</span>
<span style="display:inline-block";>
Text right
</span>
</div>
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.
My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.
I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/
Snippet:
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>
WARNING: OUTDATED ANSWER
Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.
One possible solution:
Give the labels display: inline-block;
Give them a fixed width
Align text to the right
That is:
label {
display: inline-block;
width: 140px;
text-align: right;
}
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>
JSFiddle
While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.
The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.
[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]
/* CSS */
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.settings label { text-align:right; }
div.settings label:after { content: ":"; }
<!-- HTML -->
<div class="settings">
<label>Label #1</label>
<input type="text" />
<label>Long Label #2</label>
<span>Display content</span>
<label>Label #3</label>
<input type="text" />
</div>
Answered a question such as this before, you can take a look at the results here:
Creating form to have fields and text next to each other - what is the semantic way to do it?
So to apply the same rules to your fiddle you can use display:inline-block to display your label and input groups side by side, like so:
CSS
input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
margin-left:20px
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 140px;
}
updated fiddle
I use something similar to this:
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>
Style:
.form-element label {
display: inline-block;
width: 150px;
}
I know this is an old thread but an easier solution would be to embed an input within the label like so:
<label>Label one: <input id="input1" type="text"></label>
You can also try using flex-box
<head><style>
body {
color:white;
font-family:arial;
font-size:1.2em;
}
form {
margin:0 auto;
padding:20px;
background:#444;
}
.input-group {
margin-top:10px;
width:60%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
label, input {
flex-basis:100px;
}
</style></head>
<body>
<form>
<div class="wrapper">
<div class="input-group">
<label for="user_name">name:</label>
<input type="text" id="user_name">
</div>
<div class="input-group">
<label for="user_pass">Password:</label>
<input type="password" id="user_pass">
</div>
</div>
</form>
</body>
</html>
You can do something like this:
HTML:
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
CSS:
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}
Hope this helps ! :)
Here is generic labels width for all form labels. Nothing fix width.
call setLabelWidth calculator with all the labels.
This function will load all labels on UI and find out maximum label width.
Apply return value of below function to all the labels.
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};
All,
I have the following code:
http://jsfiddle.net/k2AMG/7/
I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:
Your name Textbox
Please check the name
Work email Textbox
Email should have a valid format
Job title Textbox
Job title should have only alphabets
Any help is appreciated. Thanks
Try it like this:
http://jsfiddle.net/andresilich/k2AMG/11/
::Edit:: fixed demo
::Edit 2:: added CSS and HTML to post for future reference
CSS
.data_item{
margin-bottom: 20px;
display: block;
}
label
{
width: 100px;
display:inline-block;
}
.left {
display:inline-block;
margin-right:5px;
}
.right {
display:inline-block;
vertical-align:top;
}
.right span span {
display:list-item;
list-style-type:none;
}
Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).
HTML
<div class="data_item">
<div class="left">
<label> Your name </label>
</div>
<div class="right">
<span>
<input type="text" />
<span class="instructions">Please check the name</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Work email </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Email should have a valid format</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Job title </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Job title should have only alphabets</span>
</span>
</div>
</div>
Try this: http://jsfiddle.net/k2AMG/9/