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>
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>
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 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 have a drop down menu and I want to have a submenu that lists colours. I'd prefer the list of colours to just be circles with the colour in it (no names). And to save vertical space I'd like to have say 4 or 5 in a row (there are about 14 colours in all). So far I'm having no luck I've come close (see the code below) but the menu is too wide and I can't seem to figure out how it's getting its width in the CSS:
<div class="item">
<i class="paint brush icon"></i>Colour
<div class="compact menu">
<div class="ui two column padded grid">
<div class="column">
<a class="item">
<div class="ui red empty circular label"></div>
Red
</a>
</div>
<div class="column">
<a class="item">
<div class="ui orange empty circular label"></div>
Orange
</a>
</div>
<div class="column">
<a class="item">
<div class="ui yellow empty circular label"></div>
Yellow
</a>
</div>
<div class="column">
<a class="item">
<div class="ui olive empty circular label"></div>
Olive
</a>
</div>
<div class="column">
<a class="item">
<div class="ui green empty circular label"></div>
Green
</a>
</div>
</div>
</div>
</div>
I ended up working it out for myself with the help of someone on the Semantic UI gitter chat channel:
<div class="item colour">
<i class="paint brush icon"></i>Colour
<div class="ui icon left menu">
<a class="item" title="Red" data-colour="red">
<i class="red circle fitted icon"></i>
</a>
<a class="item" title="Orange" data-colour="orange">
<i class="orange circle fitted icon"></i>
</a>
<a class="item" title="Yellow" data-colour="yellow">
<i class="yellow circle fitted icon"></i>
</a>
<br>
<a class="item" title="Olive" data-colour="olive">
<i class="olive circle fitted icon"></i>
</a>
<a class="item" title="Green" data-colour="green">
<i class="green circle fitted icon"></i>
</a>
<a class="item" title="None" data-colour="">
<i class="red ban fitted icon"></i>
</a>
</div>
</div>
It requires the following custom CSS:
.ui.dropdown .item.colour {
> .icon.menu {
font-size: 0;
> .item {
display: inline-block;
}
}
}
It now looks like this:
I got the left side to line up but can't get the right side to work. I tried pull-right, float:right, text-align:right, but none of them work. Here is my code. Appreciate any help]1
<footer class="footer clearfix">
<div class="footer-grid">
<div class="footer-L col-md-6">
<a class="footer-text" href="hysys.html">
<span>Previous</span>
<i class="fa fa-arrow-left"></i>
<h2>HYSYS<h2>
</a>
</div>
<div class="footer-R col-md-6 pull-right">
<a class="footer-text" href="hysys.html">
<span>Next</span>
<i class="fa fa-arrow-right"></i>
<h2>Aspen One</h2>
</a>
</div>
</div>
</footer>