Please take a look at https://jsfiddle.net/797311vt/.
The following menu looks fine in broader views but the last item (fourth) dissapears in mobile view. It also dissapears with <div class="right stackable menu">.
<div class="ui stackable menu">
Home
Second
<div class="right menu">
Third
Fourth
</div>
</div>
How can I make a stackable menu where all four items show in mobile view?
This is an open bug as of 22-Sep,2016 (link: https://github.com/Semantic-Org/Semantic-UI/issues/3604 )
To move around the bug, you can do the following: https://jsfiddle.net/batrasoe/udpzkj7p/
<div class="ui stackable menu">
Home
Second
Third
Fourth
</div>
It does not use a right menu, but assigns the right class to the second-last element in the menu, which pushes the right of the elements to the right.
You would also have to add a border-left property to the last element. See fiddle for details.
Related
I have my HTML and it looks as below:
<div class="col-4 icnContainer">
<clr-dropdown>
<button clrDropdownTrigger aria-label="Dropdown demo button">
<clr-icon shape="ellipsis-vertical"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
<div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
<div aria-label="Dropdown header Action 2" clrDropdownItem>Action 2</div>
<div clrDropdownItem>Link 1</div>
<div clrDropdownItem>Link 2</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
My output that I get with this kind of setup is shown in the image below:
'
As you can see in the circle, there is an caret added after the Ellipsis. I dont want the caret, I just want the ellipsis like below:
Can anyone tell me how I can achieve that.
Furthermore, the dropdown is opening inside the containing div as shown below
How can I get the menu to open outside the containing div.
For positioning the menu you can use one of the following positions:
top-right
top-left
bottom-right
bottom-left
right-top
right-bottom
left-top
left-bottom
Here is a demo with the bottom-right position: https://stackblitz.com/edit/so-58030404-dropdown-menu-positioning
I'm not sure where the carot icon is coming from, can you fork and modify the stackblitz to create a reproduction that I can look at?
I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.
What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav.
What I currently have is:
If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,
<md-sidenav-container class="container-fluid">
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<md-sidenav #sidenav class="example-sidenav">
Manu bar
</md-sidenav>
</md-sidenav-container>
Note:Break tags are added to increase the height of the content.
LIVE DEMO
I have two columns in a row.
<div class="row">
<div class="col-lg-2">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8">
I want this column in top side on mobile.
</div>
</div>
When I visualize this on my laptop, they are in left and right side respectively. When I watch the page on my mobile phone I see first column on top of the web page.
I want to change the order, first column left side on laptop and bottom side on mobile phone instance of first column that is left side on laptop and top side on mobile phone.
I want to keep the laptop aspect, only change mobile phone view.
Check out the documentation of Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid
By adding the *-lg classes you have only specified how your page should behave on a large screen.
You probably want to add the *-xs classes for defining the columns in the smartphone widths. You can keep the *-lg classes just as they are now.
Furthermore, for changing the order of columns in different widths, bootstrap provides *-push and *-pull classes, see here: http://getbootstrap.com/css/#grid-column-ordering
add class to the larger div .pull-left, and smaller div .pull-right
<div class="row">
<div class="col-lg-2 pull-right">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8 pull-left">
I want this column in top side on mobile.
</div>
</div>
This will float the second larger div to the left, and thus in the mobile view, where .col-lg-8 is not applicable, will bring it on top
Edit: As this answer creates a gap between two divs, because there are only 10 columns utilized
You will need to change your html see this http://jsfiddle.net/53u69ama/1/
<div class="row">
<div class="col-sm-8 col-xs-12 ">
I want this column in top side on mobile.
</div>
<div class="col-sm-2 col-xs-12 ">
I want this column in bottom side on mobile.
</div>
</div>
Edit 2: you can also change the top position using position style, but this will require you to set the static top for one div. Or you may change it using javascript dynamically.
see this http://jsfiddle.net/53u69ama/2/
Solution:
<div class="row">
<div class="col-lg-8 col-lg-push-2">
I want this column in top side on mobile.
</div>
<div class="col-lg-2 col-lg-pull-8">
I want this column in bottom side on mobile.
</div>
</div>
Use this
<div class="row">
<!-- this is visible if view is all less lg (on top) -->
<div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
<div>
Content to view 2.
</div>
</div>
<div class="col-lg-2">
Content to view 1
</div>
<!-- this is visible when view is lg (in right) -->
<div class="col-lg-8 device-lg visible-lg">
Content to view 2.
</div>
</div>
Note that you will have to copy "Content to view 2." twice.
I'm working on an app that has a group of icons in the footer of a column. Currently, the icons are left-justified. However, I'd like to make them centered. To demonstrate, I have a fiddle that can be found here. The HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
<div id="nav-tab-items" class="row">
<div class="nav-tab-frame column">
<div class="ui active tab nav-tab-content" data-tab="home">
First Tab
</div>
<div class="ui tab nav-tab-content" data-tab="info">
Second Tab
</div>
<div class="ui tab nav-tab-content" data-tab="third">
Third Tab
</div>
</div>
</div>
<div id="nav-tab-control" class="bottom aligned row">
<div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
<a class="active red item" data-tab="home">tab 1</a>
<a class="blue item" data-tab="info">tab 2</a>
<a class="green item" data-tab="third">tab 3</a>
</div>
</div>
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
There are two problems with nav-tab-control. First, as soon as I set 'bottom:0' for the , the nav-tab-control style, the row takes up the entire width of the page. I can't repro that error in the fiddle. But I have no idea what would even cause that. Second, and I believe this is related to the first problem, is that I can't figure out how to center the icons within the width of the navDiv.
I sincerely appreciate any insights that someone can provide.
This code centers the buttons at the bottom (I couldn't think if what else you would mean by 'icons').
You say #nav-tab-control is claiming the full width of the screen. That is actually needed to make it possible to center its contents. So because it didn't do it automatically, I've set the width to 100% in the css:
#nav-tab-control {
position:absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
}
.ui.pointing.secondary.menu.drawer { display: inline-block; }
This makes #nav-tab-control the full width of the page, and centers any text in it.
Then, the container of the icons is displayed as inline-block, so it respects that centering.
http://jsfiddle.net/62eMj/3/
If you don't want to center it in the whole screen, you can also set position: relative to one of the parent elements. For instance to to center them inside the blue bar (also causing them to wrap):
http://jsfiddle.net/62eMj/4/
I found it a bit hard to find out what your actual problem is. I thought I knew but now I', not so sure. I hope these hints will help you solve it.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/