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
};
};
Related
I cannot get flexbox to work. I've tried all sorts of CSS properties, but it doesn't want to work. display-flex doesn't seem to do anything to the page at all. I tried various tags, like flex-direction:column, and text-align: center, but nothing works. Why won't flexbox do anything?
Expected result:
My current result:
https://replit.com/#elliotsFinal/what-to-study#index.html
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class=flex-container>
<h3>WHAT TO STUDY</h3>
<h1>What are your interests?</h2>
<fieldset>
<legend>Pick one from this list</legend>
<div>
<input type="radio" id="data" name="list-1" value="data"
checked>
<label for="data">data</label>
</div>
<div>
<input type="radio" id="math" name="list-1" value="math">
<label for="math">mathy</label>
</div>
<div>
<input type="radio" id="theory" name="list-1" value="theory">
<label for="theory">theory</label>
</div>
</fieldset>
<fieldset>
<legend>And one from this list</legend>
<div>
<input type="radio" id="people" name="list-2" value="people"
checked>
<label for="people">people</label>
</div>
<div>
<input type="radio" id="problem solving" name="list-2" value="problem solving">
<label for="problem solving">problem-solving</label>
</div>
<div>
<input type="radio" id="art" name="list-2" value="art">
<label for="art">art</label>
</div>
</fieldset>
<script src="script.js"></script>
</div>
</body>
<footer>
<P>Please select one choice in each list</P>
</footer>
</div>
</html>
My CSS:
html, body {
height: 100%;
width: 100%;
}
.flex-container {
font-family: Arial, Helvetica, sans-serif;
display: flex
flex-direction: column
background-color: DodgerBlue
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.list-1 {
}
.list-2 {
}
There's various issues here.
<div class=flex-container> should be <div class="flex-container">.
.flex-container > div means "target DIVs that are direct children of .flex-container", but your container's direct children are headings and fieldsets.
Not related to your issue, but <h1>What are your interests?</h2> is invalid markup - make sure your opening and closing tags match.
I hope this helps: https://replit.com/#MatijaJanji/what-to-study#style.css
Besides the issues by geat, you're targeting the wrong element with the flex property. In the example above, I'm targeting all the divs that have fieldset as the parent. I'm not sure if that's what you were after.
You have quite a few errors and omissions in your code that need to be corrected:
CSS
Flexbox goes only one level deep (FBL parent vs. flexed child) => the fieldsets need to be a flexbox parent row inside .flex-container parent for the <div> inside.
.flex-container => two missing semi-colons
.flex-container > div => should be .flex-container > fieldset > div
.list-1, .list-2 => should be [name="list-1"] and [name="list-2"] as you don't use the classes in your HTML tags.
HTML
missing </body>
orphaned </div>
error <div class=flex-container> should be <div class="flex-container">
h1 vs h2 => <h1>What are your interests?</h2>
given the example image => <h3> and <h1> should come before the <div class=".flex-container">, not be a part of it.
Semantics (a11y = accessibility)
<h3> and <h1> => should be <div> with different font settings
In below snippet you will find the corrected code with some comments. I did not provide anything even resembling 'responsive design' nor did I attempt to create the final design, leaving it up to you to implement.
html, body {
height: 100%;
width: 100%;
}
h1,h3 { text-align: center }
h3 { letter-spacing: 0.3rem } /* 'stretch' the text */
.flex-container {
font-family: Arial, Helvetica, sans-serif;
display: flex; /* had missing semi-colon */
flex-direction: column; /* dito */
background-color: DodgerBlue;
width : max-content; /* restrict W/H to its content => the fieldset */
height: max-content;
margin: 5rem auto; /* some top/bottom space, 'auto' centers horizontally */
}
.flex-container > fieldset {
display: flex;
}
.flex-container > fieldset > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
[name="list-1"] { /* rule for radio group named 'list-1' */ }
[name="list-2"] { /* rule for radio group named 'list-2' */ }
<h3>WHAT TO STUDY</h3>
<h1>What are your interests?</h1>
<div class="flex-container">
<fieldset>
<legend>Pick one from this list</legend>
<div>
<input type="radio" id="data" name="list-1" value="data" checked> <label for="data">data</label>
</div>
<div>
<input type="radio" id="math" name="list-1" value="math"> <label for="math">mathy</label>
</div>
<div>
<input type="radio" id="theory" name="list-1" value="theory"> <label for="theory">theory</label>
</div>
</fieldset>
<fieldset>
<legend>And one from this list</legend>
<div>
<input type="radio" id="people" name="list-2" value="people" checked> <label for="people">people</label>
</div>
<div>
<input type="radio" id="problem solving" name="list-2" value="problem solving"> <label for="problem solving">problem-solving</label>
</div>
<div>
<input type="radio" id="art" name="list-2" value="art"> <label for="art">art</label>
</div>
</fieldset>
</div>
</body>
<footer>
<p>Please select one choice in each list</p>
</footer>
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'm was just passing my time by working on random code of HTML and CSS where I have a div which has class .box and has an Image, Text and a Form in it with input boxes.
I found that when I provide text-align: center; to my parent, all elements comes in the center.
I can't understand what's happening here and why Image and Input boxes react text on text-align: center;
here is the codepen link to my code http://codepen.io/rhulkashyap/pen/MKvzzZ
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/> <br />
<input type="text" placeholder="Password"/> <br />
<input type="submit" value="Login"/>
</form>
</div>
From the CSS specification:
This property describes how inline-level content of a block container is aligned. https://www.w3.org/TR/CSS2/text.html#alignment-prop
All inline and inline-block elements (input, img) are affected of text-align!
You can avoid this by using display:block; for the inner elements (like form, h1, div).
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
input {
display:block;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Login"/>
</form>
</div>
A Test Case
div {
border:1px dashed #000;
text-align:center;
width:500px;
}
.block {
display:block;
}
.inline {
display:inline;
}
<div>
<input type="text" value="standard: inline-block">
<input type="text" class="block" value="with display:block">
<input type="text" class="inline" value="with display:inline">
</div>
When you pass text-align: center, it means that the data inside particular div will be placed center according to a rule. Data can be anything, it can be image, text or input box. Your elements are coming in center because all the inline elements are effected by "text-align: center". Please have a look on the following url https://www.w3.org/Style/Examples/007/center.en.html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
</body>
</html>
I'm trying to get 'ADD' and the search box to sit next to each other, side by side and align them right.
I've checked out other answers and I have implemented an inline-block solution, they sit side by side (but for some reason it's not working on the fiddle). How can I align the elements to the right of their parent?
<div class="span6">
<h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
Fiddle
JSFiddle does not use SCSS by default. Expand the Languages menu on the left and choose "SCSS" instead of "CSS". This should result in the elements aligning side-by-side.
To align the nav to the right, make both span6's 50% width and float/text-align the nav right.
.span6{
float: left;
width: 50%;
}
nav{
float: right;
text-align: right;
...
}
Fiddle
Erik Gillepsie is right. Here is your Fiddle in CSS structure and with the correct HTML input tag: http://jsfiddle.net/6MY8g/
<input name="search" size="10" type="search" placeholder="Search" results=5 />
Edit: to align right (only the second div), add a class "right" to your div and make it float right.
Try This : just replace your code with this
<div class="span6">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
<a class="btn" href="/add">ADD</a>
</form>
</nav>
So, if i'm understanding you correctly you want the title "Article Manager" and the search box and the ADD link to all be on the same line. AND, you want the "Article Manager" to be on the left, and the search and add group aligned to the right, correct?
Create a container for your row, and put everything in it, and give it 100% width so it spans the entire width of the page. Then float the title to the left, and float the search box group to the right. Done and done.
<div class="header-container">
<div class="span6 title">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6 search">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
</div>
http://jsfiddle.net/9p2VM/7/
Your CSS is not well-formed in the fiddle. Without changing a line of code in the fiddle ie. by just indenting the CSS properly, your code works fine.
This is how your CSS is:
.span6{
float: left;
}
nav{
white-space: nowrap;
.btn{
display: inline-block;
}
form{
margin: 0;
padding: 0;
display: inline-block;
input[type=search] {
margin: 15px 0 0 0;
}
}
}
Change it to:
.span6 {
float: left;
}
nav.span6 {
white-space: nowrap;
float:right;
}
.btn {
display: inline-block;
}
form {
margin: 0;
padding: 0;
display: inline-block;
}
input[type=search] {
margin: 15px 0 0 0;
}
And it works fine. See here->http://jsfiddle.net/9p2VM/8/
Hope this helps!!!
Hi there, I am designing a questionnaire which is embedded into an Accordion widget structure. Originally, I started it using table for layout (I know, I know) which was ok.
Question text goes to accordion panel and user's guidance and responses go to accordion content area.
Now I would like get rid of table and use pure css, maintaining the same layout. The problem is - I cannot put two major blocks (div=Guidance and form=Response) together on the same line (flow does not help). I can move "Response" up to line it up with Guidance but only if I use negative top: -250px which seems wrong.
So, here is HTML for a single question:
<div id="Q08150"> <!-- BEGIN OF PANEL -->
<div class="Question">
<span class="QNumber">8.150</span>
<span class="QText">Question text</span>
</div>
</div> <!-- END OF PANEL -->
<div class="PanelContent"> <!-- BEGIN OF CONTENT -->
<div class="Guidance">
<p>Guidance text1</p>
<p>"Guidance text 2</p>
</div>
<form class="Response">
<div class="ResponseControls">
<label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY">Yes</label>
<label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN">No</label>
<label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS">Not Seen</label>
<label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA">Not Applicable</label>
</div>
<div class="responseDetails">
<div class="Observation">
<label for="ObsXXXX">Observation:</label>
<textarea name="observation" id="ObsXXXX" rows="6" disabled></textarea>
</div>
<div class="DueDate">
<label for="DueDateXXXX">Due date:</label>
<input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
</div>
<div class="actions">
<label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
<textarea name="actions" id="paXXXX" rows="6"></textarea>
</div>
</div> <!-- end of div class="responseDetails" -->
</form> <!-- end of class="Response" -->
</div> <!-- END OF CONTENT -->
and the following CSS
.Question {
width: 100%;
}
.PanelContent {
width:100%
}
.QNumber {
font-weight: bold;
}
.QText {
font-weight: bold;
padding-left: 20px;
}
.Guidance {
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
left:60%;
width: 45%;
}
textarea[name="observation"] {
resize:none;
width: 530px}
textarea[name="actions"] {
resize:none;
width: 530px}
Now, because it is accordion - I cannot wrap the entire question in a div, otherwise it will not work; so I have to keep question and response parts separated.
The top picture is what I would like to have and lower one shows current look using table.
Thanks in advance!
Surely, set these two major "players" as below:
.Guidance {
position: absolute;
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
width: 37%;
float: right;
position: absolute will do the trick.