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
Related
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!
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 am currently playing around with the Sementic-UI framework responsive capabilities and I hit a wall when using the stackable grid. Specifically, I was trying to replicate a classic front page layout where large paragraphs and pictures are layout in one third and two thirds columns, alternating left and right.
<div class="ui stackable grid">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
<div class="six wide column">
<img alt="Left image" />
</div>
<div class="ten wide column">
<p>Right content</p>
</div>
</div>
<div class="ui stackable grid">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
<div class="ten wide column">
<p>Left content</p>
</div>
<div class="six wide column">
<img alt="Right image" />
</div>
</div>
I repeat this pattern for all sections and swap the two side by side columns every time. The thing is, when the grid is stacked, I would like to keep the image on top of the content. It works fine for the first case because the columns are already in the right order, but obviously fail for the second block since the image is placed after the content.
I was wondering if there is an easy way to accomplish this or can it only be done using javascript? Should I keep using the grid or should I use something else? If I need to use javascript, what would be the best way to detect the grid's layout change?
This is my first time doing responsive design so references on the topic are welcomed.
This is possible using the reversed variation of the grid element. I would suggest the following for the second grid:
<div class="ui stackable grid">
<div class="row">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
</div>
<div class="computer reversed row">
<div class="six wide column">
<img alt="Right image" />
</div>
<div class="ten wide column">
<p>Left content</p>
</div>
</div>
</div>
Putting the image first by default and only reversing on computer screen sizes minimises the risk that the image can be at the end with columns stacked. It leaves the possibility of screen sizes where the image appears to the left before the columns have stacked, but this should be less serious an issue.
As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>
On my current website using bootstrap, I have a set of 'wells' within a container-fluid. The effect I am trying to achieve is to have each well is side by side in one row. This was fine for a few wells. However, now I have added more wells and I have begun testing on smaller resolutions.
Now, when the wells reach the edge of the browser window, they wrap around. This is not the behavior I'd like. Instead, I would like a horizontal bar to appear and allow users to scroll sideways to view the rest of the wells. All the wells should be in the same row, irrespective of screen resolution, the number of wells, and the width of the well's contents.
Here is a brief section of code to give you an idea of my structure:
<div class="container-fluid">
<div class="row">
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 1 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 2 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 3 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<!-- MORE WELLS HERE -->
</div>
</div>
Am I using the correct Container? How can I achieve this 'no wrap' row result?
Thanks!
You may need some custome CSS to get that result use this:
<div class="container-fluid">
<div class="row wells"> // ADD Class "wells"
<div class="span">
Then on CSS
.row.wells {
white-space:nowrap;
overflow:auto;
}
.span {
display:inline-block;
}
Check this Demo