I need to dismiss a ui dropdown while hovering over it. Now, the ui drop down is just visible and never shows or hides when tapped or clicked.
Here are the snippets:
<div ng-show="user" class="ui pointing dropdown link item">
<span class="text">Reg</span>
<i class="dropdown icon"></i>
<div class="menu transition visible">
<a class="item" href="/xyz">
Schools
</a>
<div class="divider"></div>
<a class="item" href="/xyz2">
Admissions
</a>
</div>
</div>
UI drop down is initialized like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/dropdown.js" type="text/javascript"></script>
<script type="text/javascript">
$('.ui.dropdown')
.dropdown();
</script>
What changes are needed here?
You just need to add the css class simple for hover.
<div ng-show="user" class="ui pointing simple dropdown link item">
<span class="text">Reg</span>
<i class="dropdown icon"></i>
<div class="menu transition visible">
<a class="item" href="/xyz">
Schools
</a>
<div class="divider"></div>
<a class="item" href="/xyz2">
Admissions
</a>
</div>
</div>
And in JS file ,you need to initialize like below
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
})
</script>
Related
I have a modal with a dropdown. When clicking the dropdown the modal always gets a scrollbar and I wanted to know if I miss something obvious? I could probably just add a class modalheight and define in css:
.modalheight {
min-height: 400px;
}
but this seems not like a true solution.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.add("is-active")
};
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()">
<span>Dropdown button</span>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Can I somehow make the modal big enough to fit all the buttons options dynamically? If not, how would I do it statically?
Check this option, I think the behaviour is connected with the dropdown menu absolute positioning that takes it out of the normal flow. By the way, for button html tag both the starting and ending tag are mandatory.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.toggle("is-active")
};
#dropdown-menu {
position: static;
}
#modal-content {
max-height: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content" id="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()"> <span>Dropdown button</span></button>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
I as trying to make a pointing drop down, and it is as Semantic UI's documentation says it should be, but it didn't open to the side when I click,I might be missing something, can you guys help me?
<pre>
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Imagem
<div class="menu">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
</pre>
The Semantic UI dropdown module requires some JavaScript for it to work properly. To just get the menu to show, you can use angular to perform the necessary Javascript work.
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
<i class="dropdown icon" (click)="showMenu = !showMenu"></i>
Imagem
<div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
This won't apply the classes with the proper timing though to do the animations that Semantic UI provides as well. To do that you will have to load the requisite js libraries(jQuery and semantics js files) and get them to play nicely with Typescript.
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]
Hello I've recently been trying to get the modals working with Semantic-UI But I can't seem to get it to work how I want it to. I want to make it so that when a user clicks a specific menu on the sidebar a modal will pop up on the page where a user can input text. If anyone knows how to go about doing this please comment below! Thanks
<a class="item">
<i class="money icon"></i>
Free Coins
</a>
Thanks to anyone that can help!
Change <a class="item"> to <a class="item" id="coins">
jquery:
<script type="text/javascript">
$(document).ready(function(){
$('#coins').click(function(){
$('#modalid').modal('show');
});
});
</script>
Note: #modalid is your modal div id.
Hope this will work.
$('#myModal').modal('attach events', 'a.item', 'show');
<div class="ui container">
//model start
<div class="ui basic modal">
<div class="ui icon header">
<i class="archive icon"></i>
Archive Old Messages
</div>
//content in model
<div class="content">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
//actions in the model(buttons)
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green ok inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
//model ends
//Button to click to pop up the model
<div class="ui button">
<i class="remove"></i>
delete
</div>
</div>
//script
<script>
$('.ui.button').click(function(){
$('.ui.basic.modal').modal('show');
});
</script>
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}
});