Here's an example.
https://jsfiddle.net/ustjx0po/2/
<div class="ui top attached large menu red inverted">
<a class="header item item_one ">
<i class="sidebar icon"></i> Menu
</a>
<div class="menu"><a class="item">Home</a>
<a class="item">Form</a>
<a class="item">Help</a>
</div>
<div class="right menu">
<a class="header item ">
<i class="remove circle icon"></i> Logout
</a>
</div>
My problem is that I have unnecessary overflow (height overflow) . I want to get rid of it.
But I would like for my sidebar to fill rest of the height when it opens.
And I wouldn't want to just add overflow:hidden; because I might have content that actually overflows full height.
Related
I've a footer that is divided in 2 columns, 1 to the left and 1 to the right.
But I'd like to set the margins so the content of the footer is align with the body (with the images you see there).
I've used Bootstrap4 tags (container) for the body but it is not working for the footer.
I'm expecting to replicate this:
Codepen
https://codepen.io/anon/pen/vwMowX
footer:
<!-- /* NEW FOOTER */ -->
{% load staticfiles %}
<style>
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
</style>
<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
<div class="col-md-6">
<div class="">
<nav class="">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<ul class="">
<li class="">
<a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
</li>
</ul>
</div>
</nav>
<ul class="left footer-links footer-interact hidden-md-down">
<li><i class="fab fa-twitter"></i></i></li>
<li><i class="fab fa-instagram"></i></i></li>
<li><i class="fab fa-facebook-square"></i></i></li>
<li><i class="fab fa-youtube"></i></i></li>
</ul>
</div>
</div>
<div class="col-md-6 text-right">
<div class="">
<p><img src="{% static 'img/home/peru-flag.png' %}"
width="40px" height="40px">Perú</p>
</div>
<div class="right footer-legal">
<span>© 2019 StickersGallito</span>
Privacy & Terms
</div>
</div>
</div>
</div>
UPDATE 1
adding the container-fluid div and container div don't allow the background to go full width.
This works for me:
https://codepen.io/anon/pen/jooNYJ#anon-login
All changes I've done are in the first 2 divs
They should look like:
<div id="footer-navbar">
<div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
***content***
</div>
</div>
The class container-fluid sets width to 100%, container doesn't. You need to have an inner wrapping div with the container class.
<div class="container-fluid">
<div class="container">
*** Put your footer in here ***
</div>
</div>
The inner div will be centered.
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>
I'm new to Semantic UI, and I'm trying to have some responsive text menu items on top of my page which are aligned to center of the page always. Here's the sample of my code.
<div class="ui text menu">
<a class="blue item" href="#">Home</a>
<a class="blue item" href="#">About</a>
<a class="blue item active" href="#">Contact</a>
</div>
I have tried to use grid based layout and many other approaches that are suggested on the Net, but all of them are related to compact menus which doesn't work on text menus.
Ended up using following code snippet:
<div class="ui relaxed grid">
<div class="five wide column"></div>
<div class="six wide column">
<div class="ui grid text menu">
<div class="five wide column">
<a class="yellow item" href="#">Home</a>
</div>
<div class="five wide column">
<a class="yellow item" href="#">About</a>
</div>
<div class="five wide column">
<a class="yellow item active" href="#">Contact</a>
</div>
</div>
</div>
<div class="five wide column"></div>
</div>
jsFiddle link
Basically, I created a grid wrapper over my menu and also wrap each menu item in a div. That gives flexibility on fixing right and left margins and also add some space if needed between each menu item.
I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).
I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?
Any help would be greatly appreciated.
Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment.
So for example:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/pLskpufp/2/
You can also just use a center aligned container:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/377v6ect/1/
I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Along with this css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}
I have searched on the semantic forums and other places; created mine.. Hope works for you too.
<div class="ui center aligned container">
<div class="ui" style="background-color: #009999;">
<!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
<div class="ui centered small image" >
<a href="#">
<img class="logo" src="./logo_white.png">
</a>
</div>
<!-- </a> -->
</div>
</div>
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}
});