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.
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.
i'm using semantic-ui framework for show modal.
problem is that when click button to show modal, first hide body scrollbar and later show modal and when close modal, body scrollbar show and page move to left .
now i need to prevent from hide body scrollbar when show modal. please help . tnx
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the gravatar image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
jquery statements is
$( ".nh-compare-page-title-sec" ).on( "click", function(){
$('.ui.modal').modal('show');
});
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 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!
I'm having an issue on chrome for windows where my .card items don't seem to get the right height. They get too much or too little resulting in the issue you can see in my screenshot below. This is only happening on Chrome for Windows as far as I can tell.
Platforms where this issue doesn't happen:
Internet Explorer 11
Microsoft Edge
Firefox
Chrome on mac
JSFiddle
<div class="ui grid stackable container">
<div class="sixteen wide column">
<div class="ui link five doubling cards">
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
</div>
<div class="content">
<div class="header">Ivysaur</div>
<div class="meta">Grass</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
</div>
<div class="content">
<div class="header">Charmander</div>
<div class="meta">Fire</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
...
</div>
</div>
</div>
I had the same problem in production on one of my website. The bug appears if the images are not in cache and must be downloaded, only on Chrome, after a recent update.
I found that a commit was about the css-flex used by semantic-ui to produce cards. This bug report details the problem and some workarounds.
I chose to add min-height: 0; to the content of my card and It worked the way it should.