I have a semantic-ui tab inside another tab and i am trying to navigate the user directly inside the secondary tab. Here is an example
<div class="ui top attached tabular menu">
<a class="item custom-item" data-tab="first">First</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">
<div class="ui top attached tabular menu">
<a class="item" data-tab="sub-first">sub First</a>
<a class="item" data-tab="sub-second">sub Second</a>
</div>
<div class="ui bottom attached tab segment" data-tab="sub-first">
<div class="ui top attached tabular menu">
<a class="item" data-tab="first">sub First</a>
<a class="item" data-tab="second">sub Second</a>
<a class="item active" data-tab="third">sub Third</a>
</div>
</div>
<div class="ui bottom attached tab segment" data-tab="sub-second">
<div class="ui top attached tabular menu">
<a class="item" data-tab="first">sub First</a>
<a class="item" data-tab="second">sub Second</a>
<a class="item active" data-tab="third">sub Third</a>
</div>
</div>
</div>
// JS
$('.menu .custom-item').tab({
history : true
});
$('.menu .item').tab({
history : true
});
The above code will override the parent tab history. I wish to achieve something like this : www.example.com#first/sub-first
Related
I am new to Semantic and I would like to use the menu look like the sidebar. As in I want the Menu to look like how it would if the sidebar is visible.
I had the same problem as this question, and the solution suggests to use menu instead of sidebar. But I am lost trying to implement this.
I used the same example as in the semantic-ui website.
<div class="d-flex pushable">
<div class="ui left vertical inverted sidebar labeled icon menu visible">
<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>
</div>
<div class="pusher">
<router-outlet></router-outlet>
</div>
</div>
Any help is appreciated.
Recently I started working with Semantic-ui and I am stumbling upon a problem which, after trying multiple things, I cannot seem to solve.
I followed the instructions for implementing vertically aligned buttons, found in the Semantic-ui docs: https://semantic-ui.com/elements/button.html
My case is however a bit different. I want to vertically group buttons which appear alongside a label.
The HTML part of thse buttons are as follow:
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
resulting in the following:
When trying to add a vertical grouping container, the horizontal aligned buttons (the labels) seem to be positioned vertical as well:
<div class="ui vertical buttons">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like 2
</div>
<a class="ui basic label">
1,121
</a>
</div>
</div>
The result:
I tried to add a horizontal class to the div's containing the buttons but that doesn't seem to work.
Any idea how I can get the button labels to be positioned as they were initially but keeping the separate button div's below each otter (vertically) using Semantic-ui?
Wrap only the first in div with vertical instead wrap both of them.
<div class="vertical">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
See here:https://stackblitz.com/edit/semantic-ui-o68elx?file=app/app.component.html
See output:
I want to make a menu fixed to the left side.
I tried sidebar, it seems good at first but soon I realize the content in the pusher cannot be shown fully if the content is wider than the screen (and there is no scrollbar).
<body>
<div class="ui visible left vertical menu sidebar">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
</div>
<div class="pusher">
a very long sentence, a very long sentence, a very long sentence, a very long sentence,
</div>
</body>
If I delete the pusher class the wide contents get shown but now the sidebar covers some contents, which is not a surprise. It seems in Semantic UI the sidebar is designed to be hidden so that contents in the pusher will be fully shown.
What is the "right" way to make a fixed left side vertical menu? or is there any way to have contents in the pusher fully seen(even a scrollbar is helpful)?
I've inspect what you described and I have an answer for your "What is the "right" way to make a fixed left side vertical menu?" question.
Here is the HTML;
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i> Menu
</a>
</div>
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo 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>
And Here is the JavaScript;
$('.ui.sidebar').sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.menu .item');
For detail you can review this code snippet;
https://codepen.io/redshift7/pen/VaKmjq
Hope you will handle it!
It only takes in consideration the height of the first tab and for the rest of the tabs it automatically sticks the content to the bottom.
<div class="ui grid railContainer">
<div class="four wide column ">
<div class="ui vertical fluid tabular menu sticky railMenu">
<a class="item active" data-tab="first">
TAB 1
</a>
<a class="item" data-tab="second">
TAB 2
</a>
<a class="item" data-tab="third">
TAB 3
</a>
</div>
</div>
<div class="twelve wide stretched column" id="railContent">
<div class="ui basic tab active" data-tab="first">
<p>BEGIN tab 1</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="second">
<p>BEGIN tab 2</p>
<div class="height first"></div>
<p>it only sticks for the first height</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="third">
<p>BEGIN tab 3</p>
<div class="height"></div>
<br>
<div class="height"></div>
<br>
<div class="height"></div>
<p>END</p>
</div>
Here i called the tab
$('.menu .item')
.tab()
;
Here i initialize ui sticky
$('.ui.sticky')
.sticky({
context: '#railContent',
observeChanges: true,
})
.sticky('refresh')
;
Here is a jsfiddle:
https://jsfiddle.net/efpyhqq9/15/
I was having the same issue, based on your try I came with a solution, refresh the sticky every time a tab end the loading and become fully visible.
$('.ui.sticky').sticky({
context: '.railContent',
});
$('.menu .item').tab({
onVisible() {
$('.ui.sticky').sticky('refresh');
}
});
I've forked your fiddle with this solution.
https://jsfiddle.net/arthurvasconcelos/pmyg0yL0/
Thanks for the idea.
Since your tab contents don't have the same height, you need to refresh your rail every time your tab content is loaded. Below is a sample code that works for your situation.
$('.menu .item').tab({
onLoad: function(){
$('.ui.sticky').sticky('refresh');
}
});
$('.ui.sticky')
.sticky({
context: '.railContent',
}).sticky('refresh');
.height {
background-color: lightblue;
height: 1000px;
}
.height.first {
background-color: skyblue;
height: 1000px;
}
.footer {
background-color: gray;
height: 600px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<div class="ui grid railContainer">
<div class="four wide column ">
<div class="ui vertical fluid tabular menu sticky railMenu">
<a class="item active" data-tab="first">
TAB 1
</a>
<a class="item" data-tab="second">
TAB 2
</a>
<a class="item" data-tab="third">
TAB 3
</a>
</div>
</div>
<div class="twelve wide stretched column railContent">
<div class="ui basic tab active" data-tab="first">
<p>BEGIN</p>
<p>works only for first tab</p>
<div class="height first"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="second">
<p>BEGIN</p>
<p><i class="green check icon"></i>now it works for this one</p>
<div class="height first"></div>
<p>it only sticks for the first height</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="third">
<p>BEGIN</p>
<p><i class="green check icon"></i>same for this one</p>
<div class="height"></div>
<br>
<div class="height"></div>
<br>
<div class="height"></div>
<p>END</p>
</div>
</div>
<div class="footer"></div>
</div>
Note: This is also true to visibility where a refresh is needed every time the DOM height is changed dynamically.
When using a "Link Item", begun with <div class="ui divided link items">, in Semantic UI (as per the manual: http://semantic-ui.com/views/item.html), where should I specify the URL of the page I would like the item to link to?
I tried wrapping the whole <div class="item"> within <a>, but doing so breaks the formatting of the item such that the content appears below the picture.
You can sub your div.item with a.item like in this fiddle or HTML below:
<div class="ui divided link items">
<a class="item" href="http://www.google.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<div class="header">Google</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://www.yahoo.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/veronika.jpg">
</div>
<div class="content">
<div class="header">Yahoo!</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://duckduckgo.com/" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<div class="header">DuckDuckGo</div>
<div class="description">
<p></p>
</div>
</div>
</a>
</div>