I am using Semantic UI.
and here is my JSFIDDLE (You need to stretch the Result panel to see the issue)
<div class="ui form segment">
<div class="three fields">
<div class="field">
<label>Field One</label>
<input></input>
</div>
<div class="field">
<label>Field Two</label>
<input></input>
</div>
<div class="field">
<label>Field Three</label>
<input></input>
</div>
</div>
<div class="three fields">
<div class="field">
<label>Field One</label>
<input></input>
</div>
<div class="field">
<label>Field Two**</label>
<input></input>
</div>
</div>
</div>
How can I make "Field Two**" in the second row stretch to the end of "Field Three"
here an example
<div class="ui form segment">
<div class="three fields">
<div class="field">
<label>Field One</label>
<input></input>
</div>
<div class="field">
<label>Field Two</label>
<input></input>
</div>
<div class="field">
<label>Field Three</label>
<input></input>
</div>
</div>
<div class="three fields">
<div class="field">
<label>Field One</label>
<input></input>
</div>
<div class="field">
</div>
<div class="field">
<label>Field Two**</label>
<input></input>
</div>
</div>
</div>
I hope it is the result you want
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'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>
I have an issue with Bootstrap 4 grid layout & I'm working with Vertical forms.
I would like to nest col-lg-9(child) inside col-lg-6(parent).
for Example:
<div class="form">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">First name</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Last name</label>
<input class="form-control" type="text">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="col">
<div class="form-group">
<label for="">City</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Street</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Zip</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="">Email address</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Additional info</label>
<input class="form-control" type="text">
</div>
</div>
</div>
Created a sample mock-up for additional explanation.
It's because you are nesting columns directly inside other columns. Don't' do that.
When nesting in a column you must first put a Bootstrap row inside it and then put at least one Bootstrap column inside that new row.
Don't ever nest a Bootstrap column directly inside another Bootstrap column.
Here's the nesting structure you must have in your case:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-9">
content goes here
</div>
</div>
</div>
</div>
</div>
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting
Hi I'm working on a project using semantic ui. I have a form, as follows:
http://jsfiddle.net/5dyzpt77/
<div class="content">
<div class="ui main container">
<div class="ui form">
<div class="one field">
<div class="field">
<label>Email</label>
<div class="one field">
<div class="field">
<input type="text">
</div>
</div>
</div>
<div class="field">
<label>Address</label>
<div class="three fields">
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
</div>
</div>
</div>
</div>
However I don't want the form to be full width like it is, I'd like it to be 6 columns wide, but still centered, and I'm not sure how to go about doing that. Any help would be great.
Add to your form-div class six wide column centered and wrap it with div with class ui grid:
<div class="content">
<div class="ui main container">
<div class="ui grid">
<div class="ui form six wide column centered">
<div class="one field">
<div class="field">
<label>Email</label>
<div class="one field">
<div class="field">
<input type="text">
</div>
</div>
</div>
<div class="field">
<label>Address</label>
<div class="three fields">
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
<div class="field">
<input type="text">
</div>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Read more about grid system here
To change the size of a field, you can simple put it in a division tag with class name as <size> wide field
example:
<form class = "ui form" action = "">
<div class="three wide field">
<input type = "text" name = "firstname">
</div>
<div class = "field">
<input type = "submit" value = "submit>
</div>
</form>
Click here for more details