I have a grid with 2 columns in it. In column one I have 1 raised segment, in column two I have 2 raised segments. Obviously, the second column will be larger. I need the segment in column one to take on full height. Any ideas?
Thanks!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="ui padded grid">
<div class="eight wide column">
<div class="ui raised segment">
<h3>Header 1</h3>
<i>Select all that apply</i>
<br />
<br />
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
<label>Information about widgets</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
<label>Additional information about widgets</label>
</div>
</div>
</div>
</div>
<div id="extraColumn" class="eight wide column">
<div class="ui raised segment">
<h3>Question 1</h3>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
<label>Include Sprockets</label>
</div>
</div>
</div>
<div class="ui raised segment">
<h3>QUestion 2</h3>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
<label>Don't include sprockets</label>
</div>
</div>
</div>
</div>
</div>
Semantic UI used CSS Flexbox, and grid is declared in a way so that the heights of adjacent columns match. So all you need to do is make sure your left segment has a height of 100% to fill the full height of your column.
Result:
<div class="ui raised segment" style="height:100%;">
Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="ui padded grid">
<div class="eight wide column">
<div class="ui raised segment" style="height:100%;">
<h3>Header 1</h3>
<i>Select all that apply</i>
<br />
<br />
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
<label>Information about widgets</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
<label>Additional information about widgets</label>
</div>
</div>
</div>
</div>
<div id="extraColumn" class="eight wide column">
<div class="ui raised segment">
<h3>Question 1</h3>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
<label>Include Sprockets</label>
</div>
</div>
</div>
<div class="ui raised segment">
<h3>QUestion 2</h3>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
<label>Don't include sprockets</label>
</div>
</div>
</div>
</div>
</div>
Related
I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.
I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:
How can I fix it?
DEMO
PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.
.full-width {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<form novalidate>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field1" class="col-md-2 col-form-label">Text Area</label>
<div class="col-md-10">
<textarea id="field1" class="form-control"
cols="30" rows="4"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group row">
<div class="col-md-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field2" class="col-md-2 col-form-label">Input</label>
<div class="col-md-10">
<input id="field2" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-1 col-form-label">Options</label>
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<span>Label 1</span>
<input type="radio" name="group1" value="Value 1"> Value 1
<input type="radio" name="group1" value="Value 1"> Value 2
</div>
<div class="col-md-6">
<span>Label 2</span>
<input type="radio" name="group2" value="Value 1"> Value 1
<input type="radio" name="group2" value="Value 2"> Value 2
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</form>
The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.
Also, clean up the various malformed HTML in the code.
http://www.codeply.com/go/sCYzgdFXxa
What should I use if my layout looks good without the display element, then I must add display: none which is set dynamically to display: block which destroys my layout. Is there no "normal" display? I have tried inline and it doesn't work either. I want to first set it to display: none and then I want it to look like it had no or "normal" display property.
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<h4 class="ui header">Semantic UI Form</h4>
<form name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div style="display: inline;" id="categor2y_contents" class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
</div>
</div>
</div>
Update
The solution was to add an extra <div class="ui grid"> but how am I supposed to know that?
If I understand your question, you are wanting to revert back to an element's initial state of display after you've overwritten it with display:none; correct? If so, simply:
#element {
display: initial;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
The solution was to add another ui grid. I found this solution from another answer How to align my label and input field
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<h4 class="ui header">Semantic UI Form</h4>
<form name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div style="display: block;" class="ui grid" id="category_contents">
<div class="ui grid">
<div class="four wide column ">
<label>Last N2ame</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
</div>
</div>
</div>
Basically I have something like this
<div class="container">
<div class="row">
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>
</div>
<div class="col-md-6>
<form class="form-group-sm">
<input />
<button type="submit"></button>
</form>
</div>>
</div>
2 columns side by side, I'm trying to figure out a way to center the forms, input, and button inside each column but cant seem too figure out how.
<form method="POST" action="./createProduct" class="form-group-sm" >
<div class="form-group">
<label for="t" class="col-md-8 control-label">Product Type</label>
<div class="col-md-8">
<input name="productType" id="t"/>
</div>
</div>
<div class="form-group">
<label for="sn" class="col-md-8 control-label">Material Cost PerSqFoot</label>
<div class="col-md-8">
<input name="matCostSqf" id="sn"/>
</div>
</div>
<div class="form-group">
<label for="snum" class="col-md-8 control-label">Labor Cost PerSqFoot</label>
<div class="col-md-8">
<input name="laborCostSqf" id="snum" />
</div>
</div>
<br />
<div class="col-md-8">
<br />
<button class=" btn btn-danger btn-lg center-block" type="submit">Submit</button>
</div>
</form>
Twitter Bootstrap has a default class for that called text-center.
Just add the text-center class to your col- divs like this:
<div class="col-md-6 text-center">
-- your content --
</div>
P.S. You forgot to properly close the column divs. Do make sure you close them always
Your markup contains some errors like an extra closing div and a missing double cotes for the class attribute : class="col-md-6>
here is the solution you can use the bootstrap class "text-center"
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
<div class="col-md-6 text-center">
<form class="form-group-sm">
<input />
<button type="submit">Submit</button>
</form>
</div>
</div>
here is a pen
I have a button that slides out a vertical sidebar. Inside the sidebar I want to have a short form for the user to enter in search queries.
#search-sidebar is the correct height.
.ui.form.segment has a height of only 4px.
I'm at a loss to what's going on...
<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
<div class="ui form segment">
<div class="two fields">
<div class="field">
<label>Number of Bedrooms</label>
<input type="number" name="bedrooms">
</div>
<div class="field">
<label>Number of Bathrooms</label>
<input type="number" name="bathrooms">
</div>
</div>
<div class="three fields">
<div class="field">
<label>Interior Size</label>
<div class="ui icon input">
<input type="number" name="interiorSize">
<i class="inverted icon">m<sup>2</sup></i>
</div>
</div>
<div class="field">
<label>Exterior Size</label>
<div class="ui icon input">
<input type="number" name="exteriorSize">
<i class="inverted icon">m<sup>2</sup></i>
</div>
</div>
<div class="field">
<label>Price</label>
<div class="ui icon input">
<i class="inverted yen icon"></i>
<input type="number" name="price">
</div>
</div>
</div>
</div>
</div>
I figured it out. You have to add class="item" around the .ui.form.segment. I'm not sure why you have to do it though.
<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
<div class="item">
<div class="ui form segment">
<div class="two fields">
<div class="field">
<label>Number of Bedrooms</label>
<input type="number" name="bedrooms">
</div>
<div class="field">
<label>Number of Bathrooms</label>
<input type="number" name="bathrooms">
</div>
</div>
<div class="three fields">
<div class="field">
<label>Interior Size</label>
<div class="ui icon input">
<input type="number" name="interiorSize">
<i class="inverted icon">m<sup>2</sup></i>
</div>
</div>
<div class="field">
<label>Exterior Size</label>
<div class="ui icon input">
<input type="number" name="exteriorSize">
<i class="inverted icon">m<sup>2</sup></i>
</div>
</div>
<div class="field">
<label>Price</label>
<div class="ui icon input">
<i class="inverted yen icon"></i>
<input type="number" name="price">
</div>
</div>
</div>
</div>
</div>
</div>
Having some nasty issues with IE6 and reading my div form layout, the html:
<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post">
<div class="row">
<div class="label">
<label for="szName">Name</label>
</div>
<div class="field">
<input type="text" name="szName" id="szName" value="#form.szName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szCompanyName">Company Name</label>
</div>
<div class="field">
<input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szAddress">Address</label>
</div>
<div class="field">
<input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTown">Town/City</label>
</div>
<div class="field">
<input type="text" name="szTown" id="szTown" value="#form.szTown#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szPostcode">Postcode</label>
</div>
<div class="field">
<input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTelephone">Tel</label>
</div>
<div class="field">
<input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szEmail">E-mail</label>
</div>
<div class="field">
<input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" />
</div>
<div class="clear"></div>
</div>
<div class="submitrow">
<input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" />
</div>
</form>
And then the CSS:
.row {width:314px;margin:0 0 8px 0;}
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;}
.row .field {width:195px;float:left;}
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;}
Working fine in IE8/7, Firefox, etc.
Also, as a rule of thumb when dealing with IE6, try adding display:inline to your floating divs
IE6 sometimes doesnt get margins and paddings right. Try to reduce them a few pixels.