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
Related
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
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>
Hey guys so i'm simply trying to Size the segment only around the content and not have it fill the entire width of the page. Ive tried everything and i just cant get it to. How do i go about resizing the segment? do i need to put it into another div? Or is there some simple semantic fix?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<div class="ui segment">
<div class="ui middle aligned grid child">
<div class="column">
<div class="ui center aligned page grid">
<div class="eight wide column">
<div class="ui two column middle aligned very relaxed stackable grid">
<div class="ui vertical divider">
Or
</div>
<div class="column">
<div class="ui form">
<div class="field">
<label>Username</label>
<div class="ui left icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Password</label>
<div class="ui left icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
<div class="ui blue submit button">Login</div>
</div>
</div>
<div class="center aligned column">
<div class="ui big green labeled icon button">
<i class="signup icon"></i> Sign Up
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add compact class to your segment as seen in their kitchen sink.
<div class="ui compact segment">
...
</div>
Applying display: inline-block on your segment will make it only take up as much space as it needs.
In your example this results in elements squishing themselves into an unnecessarily narrow size. Try applying the min-width property to either the segment itself or other elements you feel are important.
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'm using Semantic-UI in my project. I created an index page, everything works ok with the elements (navbar, footer, etc).
Now Im dev a signup page but footer does not goes to the end of the page, what can I do ?
Footer code:
<div class="ui inverted vertical footer segment">
<div class="ui container">
Travel Match 2015. All Rights Reserved
</div>
</div>
NOTE: I do not have any css rules(yet) in the footer, only the ones added by semantic-ui
UPDATE:
navbar code:
<div class="ui inverted segment">
<div class="ui container">
<div class="ui inverted secondary menu">
<div class="item">
<i class="plane icon app-icon"></i>
</div>
<div class="right item">
Signup
</div>
</div>
</div>
</div>
form code:
<form class="ui large form container">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
<div class="striped"></div>
You can try absolute positioning since your content is smaller than the section in Semantic-ui docs.
Use min-height for applying the CSS rule as the footer is placed at the bottom at certain height range and thus avoiding any overlap over the content.
#media (min-height: 320px) {
.ui.footer.form-page { /* Increased specificity for SO snippet priority */
position: absolute;
bottom: 0;
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="ui inverted segment">
<div class="ui container">
<div class="ui inverted secondary menu">
<div class="item">
<i class="plane icon app-icon"></i>
</div>
<div class="right item">
Signup
</div>
</div>
</div>
</div>
<form class="ui large form container">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
<div class="striped"></div>
</div>
<div class="ui inverted vertical footer segment form-page">
<div class="ui container">
Travel Match 2015. All Rights Reserved
</div>
</div>