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);
}
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 have a div I'm trying to give specific properties to. My page has a header and a footer, and I want the body to consist of a panel with 15px padding all around, but the bottom padding always ends up variable. If the window is too tall, I end up with bottom padding that's 3–4x larger than the top and side padding, and if the window is too small, the footer overlaps the bottom of the panel. My html essentially looks like this:
<div class="container-fluid">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
I've tried giving #content the following style:
position: fixed;
top: 15px;
bottom: 15px
hoping that I could get a constant border all around, but when I have both top and bottom properties, top just overrides bottom and I still have that variable padding on the bottom. Any ideas?
For further clarification, see jsfiddle here. Notice that when you drag the divider above Result, the lower border moves up or down at about half the speed you're moving your cursor—I want to make it so the bottom of the panel stays a constant distance from the bottom of the window.
Thanks!
It's easiest to just introduce a wrapper to avoid stomping on Bootstrap styles.
<div class="container-fluid">
<div class="my-wrapper">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
And:
.my-wrapper{padding:15px;}
JSFiddle
I am trying to have my bootstrap 3.0 layout pin the content of the right column to the top, thus staying in place as the main content scrolls on. I have arrived at the following code, which blows up as I re-size the browser. Is there a way to do this?
<div class="col-md-10>main content</div>
<div class="col-md-2 container" style="padding: 15px 0px 10px 23px; position: fixed; right: 20px; top:75px">
Right column, stuck to the top
</div>
I am not really (engineer learning these techniques) a bootstrap or CSS guy, so if bootstrap doesn't support this - that is valuable information for me as well.
You can use affix on the content inside the right column..
<div class="col-md-10>main content</div>
<div class="col-md-2">
<div class="affix">..</div>
</div>
Here's an example Bootply that you may find useful: http://bootply.com/104413
Demo
You can do this by using the affix class.
<div class="well col-span-4" data-spy="affix">
<div class="btn btn-large btn-danger col-span-12">This is fixed</div>
</div>
Animation
The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!
I'm using the css styles from Twitter Bootstrap but I can't seem to align my "span16" div with my breadcrumb container. The breadcrumb container is the size I need. I've attached a screenshot to show the issue.
Here is my HTML:
<div class="container">
<ul class="breadcrumb" style="margin-top: 10px;">
<li>Search»</li>
<li class="active">Basic</li>
</ul>
<div class="row">
<div class="span16 well">
<form id="form_id" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<div class="row">
<div class="span-one-third">
Span 1/3
</div>
<div class="span-one-third">
Span 2/3
</div>
<div class="span-one-third">
Span 3/3
</div>
</div>
</form>
</div>
</div>
</div>
You can view the full page here
Any idea what the issue is?
The span16 is wider than the container. The breadcrumb is restricted by the width of the container. Increasing the size of the container will allow the breadcrumb to match up.
The .span16 {} has a static width of 940 but it also has 19px padding applied so it's 940 + 2x19