I'm trying to layout a form using Semantic UI. Basically, I have 2 columns where I display the fields and buttons, like this:
The markup code is:
(NOTE: I've added borders to each column to help you see them. Also, I'm using Smarty templates)
<div class="ui equal height container grid">
<div class="ui row">
<div class="ui ten wide column" style="border: 1px solid green">
<!-- FORM -->
{include file="form/left-column.tpl"}
</div>
<div class="ui six wide column" style="border: 1px solid blue">
<div class="ui grid">
<div class="ui sixteen wide middle aligned column" >
<!-- BUTTONS -->
{include file="form/right-column.tpl"}
</div>
</div>
</div>
</div>
</div>
The second column has a grid with a column with 'middle aligned' class, but it doesn't center the buttons in the middle. I've searched in the Semantic UI website docs but I couldn't find anything helpful for this. Any suggestions?
Thanks!
Related
I began learning Semantic ui lately.
The issue is that I didn't know why the "segment" width overflow the "container".
the => jsfiddle to be more clear.
any more alternative solutions?
Besides the grid system, i'm struggling with padding too (without touching the custom cc)
Thank you for your any advices.
<div class="ui container">
<header>
<h1 class="ui huge header">Your Logo
<span class="ui sub header">Using Single layout to create several looks</span>
</h1>
</header>
<div class="ui inverted brown segment">
<div class="ui inverted secondary menu">
<a class="ui brown big button">
Home
</a>
<a class="ui brown big button">
Messages
</a>
<a class="ui brown big button">
Friends
</a>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="ui inverted green placeholder segment column">
</div>
</div>
</div>
</div>
The segment will overflow from the container because semantic grids use negative margins. There's a margin of -1rem on all sides of the grid to make sure that the flex grid sits properly with the outsides of the container.since there's a gutter on the sides of the grid columns. Use a padded grid variation to make this work properly. https://semantic-ui.com/collections/grid.html#negative-margins
I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing something here?
<div class="ui bottom attached segment pushable">
<div class="ui left vertical menu visible thin attached inverted sidebar">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="search-bar">
<div class="ui fluid action input">
<input placeholder="Search..">
<div class="ui green button"> Search </div>
</div>
</div>
<h3 class="ui block header">
Item
</h3>
</div>
</div>
https://jsfiddle.net/kour6d1x/
If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos
Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.
Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.
JSfiddle
I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar
.sidebar.visible + .pusher{
margin-right: 58px;
}
Custom CSS subtracting the width of the sidebar would do the trick:
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
I would like to have a responsive list of items, dynamically fetched from the server (so the number of items is unknown).
According to Foundation 6, the block grid is the way to go. I have used the block grid successfully to show images, but when I try to create a grid inside a block grid column, it doesn't look too good.
Here is my code:
<div class="foods row small-up-1 medium-up-3 large-up-4">
<div class="food column">
<div class="row">
<div class="small-6 medium-4 large-3 columns picture ar-wrapper ar-4-3">
<div class="ar-container">
</div>
</div>
<div class="small-6 medium-8 large-9 columns data">
<div class="row">
<div class="small-12 columns title">
</div>
</div>
<div class="row">
<div class="small-12 columns description">
</div>
</div>
<div class="row">
<div class="small-12 columns restaurant-name">
</div>
</div>
</div>
</div>
</div>
</div>
None of the additional classes interfere with the width of change any float settings.
The result looks like this:
The tall block on the left is the "large-3 columns" element and the selected (blue-ish) element is the "large-9 columns" large div (it's made on a large screen). So by the looks of it, the block grid column has more than 12 simple grid columns.
I appreciate any help or alternative solutions on how to solve this.
Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.
I've created a bootstrap theme with 4 panel boxes and with text in it.
Three of the boxes have have 3 snetence in one of the box is only 1 sentence.
The Problem is, that the three boxes have a different height than the one box with the little text.
Is there a CSS option to create the panel - boxes with the same height, does not matters how much text are in the boxes?
Edit:
Here the code
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading</h3></div>
<div class="panel-body ">
<p>Much Text, to much for here :)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try just making a table, or you can use display:table on the element which contains the boxes, and display:table-cell on the boxes.
You can also try using a flex grid.
How do I keep two divs that are side by side the same height?