Below is the accordion inside sidebar markup with Semantic UI.
<!DOCTYPE 5>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app">
<div class="ui bottom attached segment">
<div class="ui sidebar vertical left menu borderless sidemenu inverted grey"><a class="item logo"><img src="./assets/icon.png"/></a>
<div class="ui accordion inverted"><a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>
<div class="content"><a class="item" href="index.html">Dashboard v1</a></div><a class="title item"><i class="home titleIcon icon"></i> Option <i class="dropdown icon"></i></a>
<div class="content"><a class="item" href="index.html">Dashboard v1</a></div>
</div>
</div>
<div class="pusher">
<div class="ui top attached menu"><a class="item"><i class="sidebar icon"></i></a></div>
<div class="ui basic segment">
<router-view></router-view>
</div>
</div>
</div>
</div>
</body>
</html>
Here are the scripts I use to create the sidebar and the accordion:
$('.ui.sidebar').sidebar({ context: $('.bottom.segment') }).sidebar('attach events', '.menu .item');
$('.ui.accordion')).accordion({ exclusive: false });
When I click on the first item of the accordion:
<a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>
sidebar is toggled into hidden mode. Do I forget to add something? I found some samples and themes online, none of them have this problem.
Thanks for the help.
I recommend using onClick event to toggle the sidebar like the following :
$( "#toggle" ).on( "click", function() {
$('.ui.sidebar').sidebar('toggle');
});
Remember to set a selector (id or class) to your triggering element :
<a class="item" id="toggle"><i class="sidebar icon"></i></a>
[DEMO]
Related
I need to dismiss a ui dropdown while hovering over it. Now, the ui drop down is just visible and never shows or hides when tapped or clicked.
Here are the snippets:
<div ng-show="user" class="ui pointing dropdown link item">
<span class="text">Reg</span>
<i class="dropdown icon"></i>
<div class="menu transition visible">
<a class="item" href="/xyz">
Schools
</a>
<div class="divider"></div>
<a class="item" href="/xyz2">
Admissions
</a>
</div>
</div>
UI drop down is initialized like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/dropdown.js" type="text/javascript"></script>
<script type="text/javascript">
$('.ui.dropdown')
.dropdown();
</script>
What changes are needed here?
You just need to add the css class simple for hover.
<div ng-show="user" class="ui pointing simple dropdown link item">
<span class="text">Reg</span>
<i class="dropdown icon"></i>
<div class="menu transition visible">
<a class="item" href="/xyz">
Schools
</a>
<div class="divider"></div>
<a class="item" href="/xyz2">
Admissions
</a>
</div>
</div>
And in JS file ,you need to initialize like below
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
})
</script>
I as trying to make a pointing drop down, and it is as Semantic UI's documentation says it should be, but it didn't open to the side when I click,I might be missing something, can you guys help me?
<pre>
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Imagem
<div class="menu">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
</pre>
The Semantic UI dropdown module requires some JavaScript for it to work properly. To just get the menu to show, you can use angular to perform the necessary Javascript work.
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
<i class="dropdown icon" (click)="showMenu = !showMenu"></i>
Imagem
<div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
This won't apply the classes with the proper timing though to do the animations that Semantic UI provides as well. To do that you will have to load the requisite js libraries(jQuery and semantics js files) and get them to play nicely with Typescript.
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
I want to implement this side bar of semantic ui in my page this is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="dist/semantic.min.css" />
<script type="text/javascript" src="dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div style="" class="ui inverted labeled icon left inline vertical 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>
</form>
<script>
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment')
})
.sidebar('attach events', '.context.example .menu .item')
;
</script>
</body>
</html>
This is what I want:
but when I click on Menu nothing happens. you can find my example here:
My example which I want to implement
That is because you are searching for a class that does not exist.
Your Javascript code looks for: $('.context.example .ui.sidebar') but in your HTML code there is no class available named: .context.example.
Therefore it will not work. If you do this:
<form id="form1" runat="server">
<div class="context example"> <!-- context & example class added -->
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i> Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div style="" class="ui inverted labeled icon left inline vertical 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>
</div>
</form>
It will work.
I am trying to get a Fly-out type menu launched from a sidebar. Any ideas/examples? Wondering if Popups are an option?
Ex: When user has their mouse over the settings icon, I want a menu to "fly-out" with the 3 options..,
<div id="mnuSideNav" class="ui vertical menu labeled icon inverted sidebar">
<div id="mnuAdmin" class="item ">
<i class="settings icon" title="Administrative Settings"></i>
<div id="mnuAdminItems" class="inverted 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>
Resolved this using a popup..,
Elements like that support overflow cannot have menus extend beyond the sidebar ("Fly-out"). So Pop-ups are the only option. Define a popup and in the javascript initializing the popup set its popup parameter..,
Ex: SideBar:
<div id="mnuSideNav" class="ui left vertical menu labeled icon inverted sidebar">
<a id="sbAdmin" class="browse item popupMenu">
<i class="settings icon" title="Administrative Settings"></i>
</a>
</div>
Popup
<div id="adminPopup" class="ui popup ">
<div class="ui one column relaxed equal height left aligned grid ">
<div class="ui column ">
<h4 class="ui header">Admin Menu</h4>
</div>
</div>
</div>
Script:
$('.popupMenu').popup({
popup: '#adminPopup',
inline : true,
hoverable: true,
position : 'right center',
delay: {show: 300, hide: 800}
});