I want to make a menu fixed to the left side.
I tried sidebar, it seems good at first but soon I realize the content in the pusher cannot be shown fully if the content is wider than the screen (and there is no scrollbar).
<body>
<div class="ui visible left vertical menu sidebar">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
</div>
<div class="pusher">
a very long sentence, a very long sentence, a very long sentence, a very long sentence,
</div>
</body>
If I delete the pusher class the wide contents get shown but now the sidebar covers some contents, which is not a surprise. It seems in Semantic UI the sidebar is designed to be hidden so that contents in the pusher will be fully shown.
What is the "right" way to make a fixed left side vertical menu? or is there any way to have contents in the pusher fully seen(even a scrollbar is helpful)?
I've inspect what you described and I have an answer for your "What is the "right" way to make a fixed left side vertical menu?" question.
Here is the HTML;
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i> Menu
</a>
</div>
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo sidebar menu">
<a class="item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="block layout icon"></i> Topics
</a>
<a class="item">
<i class="smile icon"></i> Friends
</a>
<a class="item">
<i class="calendar icon"></i> History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
And Here is the JavaScript;
$('.ui.sidebar').sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.menu .item');
For detail you can review this code snippet;
https://codepen.io/redshift7/pen/VaKmjq
Hope you will handle it!
Related
I am new to Semantic and I would like to use the menu look like the sidebar. As in I want the Menu to look like how it would if the sidebar is visible.
I had the same problem as this question, and the solution suggests to use menu instead of sidebar. But I am lost trying to implement this.
I used the same example as in the semantic-ui website.
<div class="d-flex pushable">
<div class="ui left vertical inverted sidebar labeled icon menu visible">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
<div class="pusher">
<router-outlet></router-outlet>
</div>
</div>
Any help is appreciated.
Recently I started working with Semantic-ui and I am stumbling upon a problem which, after trying multiple things, I cannot seem to solve.
I followed the instructions for implementing vertically aligned buttons, found in the Semantic-ui docs: https://semantic-ui.com/elements/button.html
My case is however a bit different. I want to vertically group buttons which appear alongside a label.
The HTML part of thse buttons are as follow:
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
resulting in the following:
When trying to add a vertical grouping container, the horizontal aligned buttons (the labels) seem to be positioned vertical as well:
<div class="ui vertical buttons">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like 2
</div>
<a class="ui basic label">
1,121
</a>
</div>
</div>
The result:
I tried to add a horizontal class to the div's containing the buttons but that doesn't seem to work.
Any idea how I can get the button labels to be positioned as they were initially but keeping the separate button div's below each otter (vertically) using Semantic-ui?
Wrap only the first in div with vertical instead wrap both of them.
<div class="vertical">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
See here:https://stackblitz.com/edit/semantic-ui-o68elx?file=app/app.component.html
See output:
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I am using Semantic UI to design a web theme and I have noticed that some icons do not load, most are working fine but some of the ones that don't work are write and write square.
Here is a link to the site
Here is the HTML:
<div class="ui page grid overview segment">
<div class="ui two wide column"></div>
<div class="twelve wide column">
<div class="ui three column center aligned stackable divided grid">
<div class="column">
<div class="ui icon header">
<i class="circular book link icon"></i>
Stories
</div>
<p>Read thousands of stories written and published by our amazing authors.</p>
<p><a class="ui teal right labeled icon button" href="#">Read <i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular write link icon"></i>
Library
</div>
<p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
<p><a class="ui teal right labeled icon button" href="#">Write <i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular user link icon"></i>
Community
</div>
<p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
<p><a class="ui teal right labeled icon button" href="#">Collaborate <i class="right long arrow icon"></i></a></p>
</div>
</div>
</div>
</div>
Here is a screenshot of the webpage in Chrome Version 34.0.1847.131
In Firefox 34.0.5
Don't have a clue why this is happening, anyone have any ideas?
I had exactly the same issue with the same icons not showing.
I found that this was a version issue.
Switching to the brand new semantic-ui version 2.0 fixed the problem for me.
How to make sidebar always visible in the Semantic UI?
Simply adding the "active" css class works, but messes up page layout.
There is a working example on jsFiddle.
This has been officially fixed.
<div class="ui vertical inverted left visible sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
</div>
<div class="pusher">This is some content.</div>
This issue is officially fixed since 2015 so the definite answer can be found below.
Just for reference… in 2014 I had to do following things to make this work:
add active css class to the sidebar
add html code:
<div class="segment">
<div class="container" style="margin:1.5em 1.5em 1.5em 325px">
<!-- content here -->
</div>
</div>