Modal Show Code
$("#classification-model").modal({
autofocus: false,
showOnFocus: false
})
.modal('setting', 'closable', false).modal('show');
Modal Hide Code
$('#classification-model').modal('hide dimmer');
Modal Html Code
<div class="ui page modals transition" id="classification-model" style="display: none !important;">
<div class="ui small modal transition visible active" style="position:relative;">
<div class="header">
<div role="list" class="ui large divided horizontal list">
<div role="listitem" class="item"><div class="content">Classification</div></div>
</div>
</div>
<div class="modalLists content classificationModalList">
<div class="ui two column grid" id="classificationModalList">
</div>
</div>
<div class="actions">
<div role="listbox" aria-expanded="false" class="ui selection dropdown main-classificationv2" tabindex="0" style="float: left;">
<div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div><i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition" id="main-classification">
</div>
</div><button class="ui icon left labeled button check-multi" onclick="ApplytoAll(this)"><i aria-hidden="true" class="check icon"></i>Apply to All</button><button class="ui icon left labeled button upload-resume" onclick="ContinueUploading(this)"><i aria-hidden="true" class="upload icon"></i>Continue Uploading</button>
</div>
</div>
</div>
how can i fix this problem semantic ui modal won't close.
modal does not close
Related
I have a collapsible box in adminlte. by default when page loads, it's expanded. How to make it collapsed by default?
Here is what I have used to make box:
https://adminlte.io/docs/2.4/js-box-widget
My HTML:
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
My script:
<script>
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
Try boxWidget('collapse')
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
$('.box').boxWidget('collapse')
OR add collapsed-box class
<div class="box collapsed-box">
...
</div>
First, add collapsed-box class to <div class="box">.
Then, add display: none inline style to <div class="box-body"> and <div class="box-footer">.
Like this:
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer" style="display: none">
The footer of the box
</div>
</div>
It should work.
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 havings problems trying to fill this search input to entire width menu, but SemanticUI uses flexbox for menu items.
<div class="ui top attached teal inverted large menu">
<div class="header item">Header</div>
<div class="item">Item</div>
<div class="ui search item">
<div class="ui left icon large input">
<input type="text" placeholder="search input">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
<div class="right menu">
<div class="item">
<div class="ui primary button">Button1</div>
</div>
<div class="item">
<div class="ui red button">
Button2
</div>
</div>
</div>
</div>
http://codepen.io/anon/pen/BoGNvP
I can think only do it with javascript? or there is a way to solve with css only?
After many attempts and research, this is the shortest solution I found
.ui.menu .search {
flex: 1;
}
http://codepen.io/anon/pen/qOQXjL
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}
});