I was surprised to find that
<h2 class="ui header">
<i class="ui comment icon"></i>
<div class="ui content">
rofl
<div class="sub header">foo bar</div>
</div>
</h2>
Is different from
<h2 class="ui header">
<i class="ui comment icon"></i>
<div class="ui content">
rofl
<div class="ui sub header">foo bar</div>
</div>
</h2>
which is identical except for having ui sub header instead of just sub header.
sub header gives 'foo bar'.
ui sub header for some reason gives us 'FOO BAR' (all caps).
I realized that I really don't understand what the 'ui' class does. What does it do?
It's just a default styles of this css class(sub) in semantic-ui for all sub-header elements.
here you can read more information about of it:
styles of sub-header in semantic-ui
Related
Is it possible using Semantic UI Card have the image on the left? The documentation shows example where the image is always on the top. What i want to obtain is something like the Semantic UI Item (but of course i want use cards), like this:
What i want to obtain is something like this:
As you can see the image is on the left and it is something similar to a Semantic UI card.
The best you can do with semantic components would be this:
<div class="ui card" style="max-width: 100%; min-width: 100%;">
<div class="content" style="padding: 0;">
<div class="ui items">
<div class="item">
<div class="ui medium image">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content" style="padding: 1rem;">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<a>
More Info
</a>
</div>
</div>
I have changed the padding on the content but that's the only custom CSS used.
To get it to look exactly like your image you will need to make your own component/style it your self.
Here is my problem. As you can see here they have used panel panel-primary, panel panel-green, panel panel-yellow and panel panel-red for the small panel views.
When I use panel panel-primary it is working just fine. But when I use other options, I get weird paled transparent colors. I tried panel panel-warning, panel panel-success and panel panel-danger as well but still the same. Only primary works. Any ideas?
I have 4 of these, exactly same with different text.
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="glyphicon glyphicon-stats" style="font-size:50px;"></i>
</div>
<div class="col-xs-9 text-right">
<div class=></div>
<div><h3>Statistics</h3></div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Show statistics</span>
<span class="pull-right"><i class="glyphicon glyphicon-arrow-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
The other panels except the primary one are not from bootstrap's css. I think they are user written.
Create your own class in your css file.
For example:
.panel-red{
background-color:#D9534F;
}
here is a jsfiddle
http://jsfiddle.net/borka/khaunb3q/
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.
Got an ASP MVC 4/5 project, using VS2012. Added is bootstrap 3.2
I had a look at the few others who had problems with Twitter Bootstrap's Dashboard example, but they did not enable me to formulate a solution to my own problem.
I have a dashboard, and to show the different pages I made use of the tab-content and tab-panes css classes. However the main area ends up below and to the right of the navigation. The other similar questions mentioned row-fluid, which the latest bootstrap doesn't have. I also tried the various answers suggested in them by modifying my css.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Clients</li>
<li>Orders</li>
<li>Stock</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main tab-content">
<h1 class="page-header" style="margin-top: 0 !important;">Dashboard</h1>
<div class="tab-pane" id="clients">
#Html.Action( "Index", "Client")
</div>
<div class="tab-pane" id="orders">
#Html.Action("Index", "Order")
</div>
<div class="tab-pane" id="stock">
#Html.Action("Index", "Stock")
</div>
</div>
</div>
</div>
Perhaps my css is wrong, or perhaps my implementation of getting the pages to load in the main area is wrong. Thank you to any answers/suggestions to get this to work.
Other things I tried: To use ajax actionlink with the div as the target update
If you are already using col-* values you don't need to use offset classnames:
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
...
</div>
<div class="col-sm-9 col-md-10 main tab-content">
...
</div>
</div>
Check this Demo
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>