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.
Related
I'm trying to add a left aligned button to a Semantic UI modal within the actions region, through using a container element, and I uploaded a sample on jsfiddle in order to give more details about the code:
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Title
</div>
<div class="actions">
<div class="ui left aligned container">
<div class="ui button">
<i class="eraser icon"></i>
Clear
</div>
</div>
<div class="ui black deny button">
Cancel
</div>
<div class="ui approve positive right labeled icon button">
Submit
<i class="checkmark icon"></i>
</div>
</div>
</div>
However, the container doesn't well apply the alignment: while the button gets left aligned, it loses its vertical alignment with other action items.
I have not found any method on implementing the alignment, despite having read the Semantic UI documentation.
Any help will be greatly appreciated.
Add float: left on the left-aligned-container
.left-aligned-container {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Title
</div>
<div class="actions">
<div class="ui left-aligned-container">
<div class="ui button">
<i class="eraser icon"></i> Clear
</div>
</div>
<div class="ui black deny button">
Cancel
</div>
<div class="ui approve positive right labeled icon button">
Submit
<i class="checkmark icon"></i>
</div>
</div>
</div>
<script>
$('#modal').modal('show')
</script>
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]
Hey im doing a page with semantic ui Id like to make a list with middle aligned buttons. But they will always float after the other content
<div class="ui divided list">
<div class="item">
<div class="ui tiny circular image">
<img src="https://www.cutecatgifs.com/wp-content/uploads/2016/12/tail.gif">
</div>
<div class="middle aligned content">
<div class="header">
Name
</div>
<a class="meta" href="mailto:#">
<i class="mail icon"></i> mail#mail.de
</a>
<div class="description">
<i class="building outline icon"></i> 2-125 <br>
<i class="fax icon"></i> 123-123-123
</div>
</div>
<div class="right floated"> <!-- this should be middle aligned -->
<div class="ui middle aligned basic icon buttons">
<a class="ui button" href="#"><i class="unhide icon"></i></a>
<a class="ui button" href="#"><i class="write icon"></i></a>
<a class="ui button" href="#"><i class="trash outline right icon"></i></a>
</div>
</div>
</div>
</div>
my drop down gets under the right side bar i have added z index but it is not working.
<div class="ui fixed stackable borderless blue inverted menu grid">
<div class="item three wide column ">
<img src="http://semantic-ui.com/images/logo.png" class="exp">
</div>
<div class="item ui search six wide column">
<div class="ui icon input">
<input class="prompt" placeholder="Common passwords..." type="text">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
<a class="item two wide column ">menu</a>
<div class="ui icon top item left pointing dropdown button " style="z-index: 100002 !important;">
<i class="wrench icon"></i>
<div class="menu " style="z-index: 102;">
<div class="header">Display Density</div>
<div class="item">Comfortable</div>
<div class="item">Cozy</div>
<div class="item">Compact</div>
<div class="ui divider"></div>
<div class="item">Settings</div>
</div>
</div>
</div>
<div class="ui right fixed vertical menu header_space">
<div class="item">
<img class="ui mini image" src="/images/logo.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
take a look at the working example here https://jsfiddle.net/49eg6rh8/
Image here
This is what you looking for?
$( document ).ready(function() {
$('.ui.dropdown')
.dropdown();
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet"/>
<div class="ui fixed stackable borderless blue inverted menu grid" style="">
<div class="item three wide column ">
<img src="http://semantic-ui.com/images/logo.png" class="exp">
</div>
<div class="item ui search six wide column">
<div class="ui icon input">
<input class="prompt" placeholder="Common passwords..." type="text">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
<a class="item two wide column ">menu</a>
<div class="ui icon top item left pointing dropdown button " style="">
<i class="wrench icon"></i>
<div class="menu " style="z-index: 300;">
<div class="header">Display Density</div>
<div class="item">Comfortable</div>
<div class="item">Cozy</div>
<div class="item">Compact</div>
<div class="ui divider"></div>
<div class="item">Settings</div>
</div>
</div>
</div>
<div class="ui right fixed vertical menu header_space" style="z-index: 100; margin-top: 50px; ">
<div class="item">
<img class="ui mini image" src="/images/logo.png" >
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
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>