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>
Related
I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->
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
I have an inline form with the following code:
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-2">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class="form-group col-xs-2">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
when I run it it looks like this:
When I resize the Browser it's looking like this:
My question is how I can have input fields with fixed width and fixed distance between columns?
Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.
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>
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>