How to position input form elements with their labels like this but not using table? Labels should be centered above input elements and blocks in row should be centered within outer block.
+----------------------------------------------+
| label1 label2 label3 |
| [..........] [..........] [..........] |
+----------------------------------------------+
There could be 1, 2, 3 or more elements in the same row.
I tried this:
.outer{text-align:center;}
.inner{float:left;}
<form>
<div class="outer">
<div class="inner">
<label for="l1">label1</label><br><input id="l1" name="label1">
</div>
<div class="inner">
<label for="l2">label2</label><br><input id="l2" name="label2">
</div>
<div class="inner">
<label for="l3">label3</label><br><input id="l3" name="label3">
</div>
</div>
</form>
Place them in the same div, and center the text in that div:
.wrapper {
text-align:center;
}
.wrapper * {
text-align:left;
}
.okay {
display:inline-block;
}
.okay p {
text-align:center;
}
<div class="wrapper">
<div class="okay">
<p>text</p>
<input type='text'>
</div>
<div class="okay">
<p>text</p>
<input type='text'>
</div>
<div class="okay">
<p>text</p>
<input type='text'>
</div>
</div>
Its also possible through bootstrap framework also.. which makes responsive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<form>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label1">label</label>
<input type="text" class="form-control" id="label1" placeholder="labeltext">
</div>
</div>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label2">label</label>
<input type="text" class="form-control" id="label2" placeholder="labeltext">
</div>
</div>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label2">label</label>
<input type="password" class="form-control" id="label2" placeholder="labeltext">
</div>
</div>
</form>
</body>
</html>
Related
I have a extremely simple Bootstrap 3 horizontal form with a row with 3 columns
Column 1 is a label referencing column2
Column 2 is a input textbox
Column 3 is a descripting text
Column 1 is aligned vertically with column2 textbox but column3 appears to be upper than the other.
¿What i´m doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form class="form-horizontal" name="frmBuscar" id="frmBuscar" method="post">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">Campo 1:</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3 ">
Unidad 1
</div>
</div>
</form>
</body>
</html>
Change this
<div class="col-lg-3">
Unidad 1
</div>
TO
<div class="control-label col-lg-1">
Unidad 1
</div>
I don't think using columns is necessarily the best way to go with this; you could use display: flex on the .form-group container and just align everything to the end of the container; also you need to remove the margin for the label and there you go.
Also for some reason I was not able to get the look on your picture with just the HTML you provided, but I works almost the same way with the CSS I worte, second form is your markup
.form-group {
display: flex;
align-items: flex-end;
}
label {
margin-bottom: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="" name="frm" id="frm">
<div class="form-group">
<label class="" for="txt1">
Campo 1:
</label>
<div class="">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="">
Unidad 1
</div>
</div>
</form>
<form class="form-horizontal" name="frm" id="frm">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">
Campo 1:
</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3">
Unidad 1
</div>
</div>
</form>
I have 2 HTML containers, but because I have span elements followed by a text input (I think this is the issue?), I'm unable to get the content in the containers centered how I want. Is there a way to push the margin or padding in on these elements? Or is there a simpler way. In the JSFiddle, they spans are pretty large, but I'd like them to be around the size of the picture below. I'm using bootstrap.
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/oy4u1sm9/4/
Idealformatting (without the large span element, of course)
Using <span> tags as labels is not best practice as they are inline elements. Try to always use <label> tags. Here is your code tweaked to match your desired styling. More comments in the fiddle below.
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
I made some comments in the code for clarity. Here you go:
https://jsfiddle.net/hmLpdnqa/
You just included wrong bootstrap file. Try this and see your issue resolved or not.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
I would like the markup below to display the "Format Example" string aligned with the textual labels of the following input fields as shown in the screenshot below. It's currently acting like it's been right-justified. Since I'm using AngularJS with Bootstrap I don't want to use things like static width, so how should I modify this to be more dynamic?
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">
<div style="float:left">
<legend>Copy</legend>
<div style="float:right">
<u>Format Example</u>
</div>
<br/>
<br/>
<div>
<input type="text" /> Format Unknown
</div>
<br/>
<div>
<input type="text" /> X.X.X
</div>
<br/>
<div>
<input type="text" /> YYYYMMDD-HHMM
</div>
<br/>
<div>
<input type="text" /> X.X-SNAPSHOT
</div>
<br/>
<div>
<input type="text" /> YYYY-MM-DD HH:MM:SS
</div>
</div>
</fieldset>
You'll just need to grid it out using columns and rows. This is a basic example and you'll need to add md, sm and xs sizing as needed. Preview the snippet in full screen.
Also, avoid using breaks to space out your rows. Do that with css instead.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">
<div style="float:left">
<legend>Copy</legend>
<div class="row">
<div class="col-lg-6 col-lg-offset-6"><u>Format Example</u></div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">Format Unknown</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">X.X.X</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">YYYYMMDD-HHMM</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">X.X-SNAPSHOT</div>
</div>
<div class="row">
<div class="col-lg-6"><input type="text" /></div>
<div class="col-lg-6">YYYY-MM-DD HH:MM:SS</div>
</div>
</div>
</fieldset>
How can I align the input fields Title and Text so that they are on the same row as the labels? I need the extra div because I'm making a form that need dynamic fields. My problem is that the input boxes appear on the next row no matter what I do.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div> <div class="row">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
Use display: inline-block; on your div
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column inline">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field inline">
<input type="text" name="title" placeholder="Title">
</div>
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
I used a class inline to show you on your first text input
added a class textrow to the 2 rows containing the input type="text"
and use display:inline-block on them
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.textrow {
display:inline-block;
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div>
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
Float:left could align them in same row, you could do that either on class .row or assign other class into it and assign float:left;
<div class="row">
........
</div>
Css
.row{
float:left;
padding-right:5px;
}
(or)
<div class="row txt">
........
</div>
Css
.txt{
float:left;
padding-right:5px;
}
Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.
You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>