Bulma label doesn't fit input - html

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?

Related

Bulma: align form horizontal fields across columns

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>

how to push existing div from one column to another column if one div is removed from that column in angular 6

In this above image, there are 3 column having 3 input fields each, in the second column one div is remove which is showing as blank space, I want that div from next column should be shifted to 2nd column and If there will be another row then div from the column of that row also be shifted, So on..
Above image is of component.html
If there is any programmatic way to do this in component.ts file.

No need to add multiple <div class="row"> make it simple. Thanks
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isRatingstatus">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isIndustry">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isClientclassificationbd">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSector">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSubindustry">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isCompanycode">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isIndustrygroup">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSilmapping">
<div class="form-group"></div>
</div>
</div>

Change Your HTML
<div class="container">
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/7u96mhp3/1/

Bulma panels, how to nest containers inside a panel?

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>

Bootstrap 3 - Two Column Layout - Get rid of placeholder

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.

do I need to use percentages or fixed values in bootstrap 3?

I am new to Bootstrap and Bootstrap 3.. I assume I should always use percentages to specify widths and never fixed values.. is that correct.
I need my row to not go to the whole screen, but only take up as much room as it needs based on the inner elements..I asssume I need to just set the width of the row.. or is there another way?
<div class="row" style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="col-xs-1">
<label style="width:100px;display:block">FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label style="width:100px;display:block;">Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</fieldset>
</div>

I imagine this is what you are going for. The col-... divs must be immediate children of the row div.
http://jsfiddle.net/742qj/
<div style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
Or perhaps
<div clas="row">
<div class="col-lg-2">...</div>
<div class="col-lg-10">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
</div>