I am trying to create a vertical left menu using semantic-ui. Something like admin menu. To make it aligned into left, I tried to use rail element provided by semantic-ui. But my content is not visible.
I tried with example code provided in the site. But result is still the same. what am I missing here?
<body>
<div class="ui segment">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
I saw semantic-ui documentation site also using similar approach for showing their right menu. If this is not a best approach to create admin menu, please suggest any other better way using semantic ui.
You need to specify size and position of an central element. For example:
<body>
<div class="ui segment" style="left:400px;width:600px;">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
You can put them in a grid container, then add a four wide column before main segment.
You should also set the main segment eight wide column to make it at the center (p.s. 16 = 4 + 8 + 4).
Run the code snippet in full page please.
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet" />
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p></p>
</div>
<div class="ui four wide column">
</div>
</div>
Related
Hey guys so i'm simply trying to Size the segment only around the content and not have it fill the entire width of the page. Ive tried everything and i just cant get it to. How do i go about resizing the segment? do i need to put it into another div? Or is there some simple semantic fix?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<div class="ui segment">
<div class="ui middle aligned grid child">
<div class="column">
<div class="ui center aligned page grid">
<div class="eight wide column">
<div class="ui two column middle aligned very relaxed stackable grid">
<div class="ui vertical divider">
Or
</div>
<div class="column">
<div class="ui form">
<div class="field">
<label>Username</label>
<div class="ui left icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Password</label>
<div class="ui left icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
<div class="ui blue submit button">Login</div>
</div>
</div>
<div class="center aligned column">
<div class="ui big green labeled icon button">
<i class="signup icon"></i> Sign Up
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add compact class to your segment as seen in their kitchen sink.
<div class="ui compact segment">
...
</div>
Applying display: inline-block on your segment will make it only take up as much space as it needs.
In your example this results in elements squishing themselves into an unnecessarily narrow size. Try applying the min-width property to either the segment itself or other elements you feel are important.
Consider this code. Why is the last element Item 5 always in a new line / row? It is supposed to be in the same line as the other items.
Note: Plnkr.co preview maybe needs to be resized to untoggle the stackable
class.
<div class="ui container">
<div class="ui centered grid">
<div class="row">
<div class="ui stackable five column grid">
<div class="column">
Item 1
</div>
<div class="column">
Item 2
</div>
<div class="column">
Item 3
</div>
<div class="column">
Item 4
</div>
<div class="column">
Item 5
</div>
</div>
</div>
<div class="row">
New Row
</div>
</div>
Maybe try to use <div class="ui stackable six column grid">?
Remove grid class on <div class="ui centered grid"> (semantic doesn´t play nice when nesting grid class elements).
Working Fiddle
Screenshot:
I'm trying to have both a top fixed menu and a left vertical menu on my website. I really want both to be fixed but if I start to scroll then the left vertical menu will slide up underneath the top menu as shown in the code below and the jsfiddle:
<div class="ui inverted top fixed menu">
<div class="header item">
Top Menu Header
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<div class="ui inverted left vertical fluid menu" id="side-menu">
<div class="item">
Item #1
</div>
<div class="item">
Item #2
</div>
</div>
</div>
<div class="twelve wide column">
<!-- Main content here -->
<div class="row">
Text here
</div>
<div class="row">
Text here
</div>
</div>
</div>
https://jsfiddle.net/318ruL3j/2/
If I use a fixed vertical menu, then the first item is hidden underneath the top menu as shown in the code below and the jsfiddle:
<div class="ui inverted left vertical fixed menu" id="side-menu">
<div class="item">
Item #1
</div>
<div class="item">
Item #2
</div>
</div>
<div class="ui inverted top fixed menu">
<div class="header item">
Top Menu Header
</div>
</div>
<div class="ui grid">
<!-- Main content here -->
<div class="column">
<div class="row">
Text here
</div>
<div class="row">
Text here
</div>
</div>
</div>
https://jsfiddle.net/z5vozbts/2/
I hope what I'm trying to do makes sense. Does anyone know how I can have both of these fixed menus without my items getting overlapped?
A quick CSS entry?
#side-menu {
height: 100vh;
padding-top:2.0em;
}
Thanks for the answers. I ended up using jQuery to make my solution a little more dynamic because my top fixed menu can vary in height. I changed the top padding of the body to match the height of the top menu using this code:
$('body')
.css('padding-top', $('#top-menu').height());
Adding padding to the top of the body pushes down the ui grid containing my side menu.
make an empty area above of your vertical menu, means enlarge your menu with an invisible element that has a same height as your fixed element
#side-menu {
height: 100%;
}
.fake_area {
position:relative;
display:block;
width:100%;
height:40px;
}
.
.
.
<div class="header item">
Top Menu Header
</div>
</div>
<div class="fake_area"></div>
<div class="ui grid">
<div class="four wide column">
.
.
.
check it
Is there any way that i achieve this design but still using the bootstrap griding system?
I want to make that design. In the sides of the div there should be an accordion like div so that i can click to close the div. I tried using col-md-5 but the grid is to much space just for side panel like. I just want a small div in right side and left side.
What about putting the text <div> inside the <div class="col-md-6">
It would be something like this :
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1">
<!-- text -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-11 col-md-1">
<!-- text -->
</div>
</div>
</div>
</div>
</div>
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>