I'm attempting to group input controls in panels to make a page look cleaner. Before using panels the controls looked like this:
markup for above:
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
When I try to nest that same group in a panel, the columns break:
markup:
<nav class="panel">
<p class="panel-heading">
Account Basics
</p>
<div class="panel-block">
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
</div>
</nav>
Is there a way to do what I am wanting, to just group an existing control structure inside of a panel?
I think you may want to try to remove the columns and try something similar to the "From" field in this Bulma example. You can see this with your form in this JSFiddle
<nav class="panel">
<p class="panel-heading">
Account Basics
</p>
<div class="panel-block">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<label class="label">Patient Name, First</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
<div class="field">
<label class="label">Mother Name, First</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
<div class="field">
<label class="label">Patient Name, Last</label>
<div class="control has-icons-left">
<input class="input is-primary" type="text">
</div>
</div>
<div class="field">
<label class="label">Mother Name, Last</label>
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
</div>
</div>
</div>
</nav>
Related
I just want each label to take up only one line.
<div class="container">
<div class="columns">
<div class="column">
</div>
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</form>
</div>
<div class="column">
</div>
</div>
</div>
This is what's happening. The labels don't fit an input, They take up more than one line
So I try to add other containers to each input. It does work, but there is a lot of work we need to do more. Also, there is a big gap between labels and inputs.
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="column">
</div>
There is a big gap between labels and inputs
Is there any better approach?
I'm trying to build a form which is divided in two columns in the top portion, and one column for the bottom portion, similar to what is shown in this image:
I created a template using Bulma columns, but the fields are not aligning the way I want them to. Below is a sample code I've been playing with:
<section class="section">
<div class="columns">
<div class="column">
<div class="columns">
<div class="column">
<div class="field is-horizontal has-background-danger">
<div class="field-label is-small">
<label class="label">Info 1</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field is-horizontal has-background-warning">
<div class="field-label is-small">
<label class="label">Info 2</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal has-background-primary">
<div class="field-label is-small">
<label class="label">Info 0</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And this is what I'm getting
What I'd like to achieve instead is the following:
Does anybody know how can I fix this? I'm not really experienced doing CSS or web in general. Please feel free to suggest a different layout if you think this is not a good design.
Thanks for any help on this.
<section class="section">
<div class="columns">
<div class="column">
<div class="columns" style="margin-left: 5px;margin-right: 5px">
<div class="column" style="margin-right: 5px">
<div class="field is-horizontal columns">
<div class="column is-2 is-small has-background-danger">
<label class="label">Info 1</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
<div class="column" style="margin-left: 5px">
<div class="field is-horizontal columns" >
<div class="column is-2 is-small has-background-warning">
<label class="label">Info 2</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal columns" style="margin: 5px;">
<div class="column is-1 is-small has-background-primary">
<label class="label">Info 0</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input type="text" class="textarea is-small" placeholder="Some text here...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.
I am trying to get my check boxes and labels to align correctly when I use the Bootstrap grid. It seems to be perfectly fine until I had a label after my check boxes.
Here is what it looks like in Firefox:
This is my code:
<div id="view2">
<div class="container-fluid center">
<div class="row">
<div class="col-xs-3">
<label for="daysAvailable">Days Available</label>
</div>
<div class="col-xs-3">
<label for="employmentDesired">Employment Desired</label>
</div>
<div class="col-xs-3">
<label for="hoursWeekly">Hours Available Per Week</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="allDays" />
<label for="allDays">All</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="monday" />
<label for="monday">Mon</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="tuesday" />
<label for="tuesday">Tue</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="fullTime" />
<label for="fullTime">FullTime</label>
</div>
<div class="col-xs-3">
<input type="text" id="hoursPerWeek" />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="wednesday"/>
<label for="wednesday">Wed</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="thursday"/>
<label for="thursday">Thu</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="friday"/>
<label for="friday">Fri</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="partTime" />
<label for="partTime">PartTime</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="saturday"/>
<label for="saturday">Sat</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="sunday"/>
<label for="sunday">Sun</label>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-3">
<label for="workNight">Can You Work Nights</label>
</div>
<div class="col-xs-3">
<label for="beenFired">Have You Been Fired Before</label>
</div>
<div class="col-xs-3">
<label for="dateAvailable">Date Available</label>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightYes" />
<label for="workNightYes">Yes</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="yesFired"/>
<label for="yesFired">Yes</label>
</div>
<div class="col-xs-3">
<input type="text" id="datepicker" />
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightNo" />
<label for="workNightNo">No</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="noFired" />
<label for="noFired">No</label>
</div>
</div>
</div>
</div>
use the bootstrap checkbox class
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
I'm tryind to understand bootstrap v2.3.2.
I want to make form like this using divs...
I done this code with divs
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
</fieldset>
</form>
it looks exactly as i need
Now i'm trying to ad there inputs and lables using divs 'control-group',
'control-label', 'controls' and it becomes hell :[ I dont understand how to place them there correctly(
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span6 ">
<div class="control-group">
<div class="row-fluid">
<div class="span6 blockkk">
<div class="pull-right">
<label class="control-label" for="textinput">Text Input</label>
</div>
</div>
<div class="span6 blockk">
<div class="pull-left">
<div class="controls">
<input id="textinput" name="textinput" placeholder="placeholder" class="input-small" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6 blockk">
second row
</div>
</div>
</fieldset>
</form>
Tried this way but the code is huge, and i can't find the way to make this input move left... noway.
How to solve this issue correctly?
Thank you!
Using Bootstrap3 try the below :
<form class="form-horizontal">
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
</form>
Using v2.3.2, try this - edit offset as required
<form class="form-horizontal">
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="text">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="text2">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="textAnother">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="textAnother2">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="andMore">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="andMore2">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore2">
</div>
</div>
</div>
</form>