I have this simple nav.
<div class="ui attached stackable menu">
<div class="ui container">
<a class="item">
Home
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="item">
<div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
</div>
</div>
</div>
I am trying to add styling to <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div> but no styles are being applied, anything .. for example
input.dictionary{
border:1px solid red;
}
does not have any effect on it.
OK So what's happening is that Semantic UI is overriding your custom style:
http://i.imgur.com/ayRs3Kx.png
As you can see your custom CSS is crossed out in chrome developer tools.
You have two choices
Make your CSS Selector more specific
Include !important after your style e.g. border:1px solid red !important;
Option 1 is more preferable. I've made a JSFiddle here with an example. By adding red-border I've made the style more specific than the Semantic UI CSS.
When you find your CSS does not seem to be working, use the dev tools to see if it shows up, and if it does what is overriding 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 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 would like to open the dropdown to the left of the link opening the dropdown, so it is visible on tiny screens like iPhone has. Is there some standard way to do it?
Here is my dropdown definition - it would be nice to get some setting(class) telling the dropdown to align right, not left side with the link.
<div class="four wide mobile three wide computer column">
<div class="ui compact dropdown doNotClose">
<i class="dropdown icon"></i>
<span class="ui tiny header">Filters</span>
<div class="menu">
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Acknowledge</label>
</div>
</div>
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Active</label>
</div>
</div>
</div>
</div>
</div>
It is possible to do it by adding pointing class to the dropdown.
You can find a JSFiddle example here: http://jsfiddle.net/ypvpajrL/
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3645
Add this style next to menu class
style="right: 0;left: auto;"
example;
<div class="ui simple dropdown icon button" style="margin:0;">
<i class="calendar icon"></i>
Date
<div class="menu" style="right: 0;left: auto;">
<a class="ui item">Today</a>
<a class="ui item">Yesterday</a>
</div>
</div>
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>