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>
Related
I am trying to horizontally center some text with the search bar using Bulma CSS, but it didn't work out the way I wanted. I tried using columns, but they are usually pulled all the way over at the edge or not placed properly. I also tried using levels but they also had similar results that I didn't want. Please help.
Here is my code:
<div class="container section">
**<p> I want to make this tag to be in the same line as the search box </p>**
<div class="field has-addons is-pulled-right">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
I want to have some text aligned to the left of the container and the search box located on the opposite right side of the row. Thank you.
Can you describe what issues you were having with the columns? Did you try using the .is-vcentered class on the .columns div?
Make sure to view the following code in a full screen.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
<div class="columns is-vcentered">
<div class="column">
<p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
</div>
<div class="column">
<div class="field has-addons is-pulled-right">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
</div>
</div>
OR I see that you said horizontally centered. Did you try the .is-centered class on the .columns container and the .is-narrow class on the .columns?
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
<div class="columns is-centered is-vcentered">
<div class="column is-narrow">
<p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
</div>
<div class="column is-narrow">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
</div>
</div>
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 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 using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using Semantic UI 'grid classes'. Please help me how to fit the login box.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my semantic website</title>
<link rel="stylesheet" href="../css/semantic.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8" async defer> </script>
<script src="../js/semantic.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div class="ui grid">
<div class="one column row">
<div class="ui padded grid">
<div class="three column row">
<div class="column">
<div class="ui segment">
<h4 class="ui dividing header">Account Info</h4>
<div class="ui form">
<div class="field">
<label for="username">Username: </label>
<div class="ui icon input">
<input type="text" placeholder="Username" name="username" id="username">
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label for="password">Password: </label>
<div class="ui icon input">
<input type="password" placeholder="Password" name="password" id="password">
<i class="lock icon"></i>
</div>
</div>
<input type="submit" name="submit" class="ui inverted blue button">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See this code found in this link:
<div class="ui one column stackable center aligned page grid">
<div class="column twelve wide">
Your stuff here
</div>
</div>
<div class="ui column stackable center page grid">
<div class="four wide column"></div><!-- empty div just padding -->
<form class="ui six wide column form segment">
<!-- login input fields go here -->
</form>
</div>
<div class="ui segment" style="margin: 0 auto;">
<h4 class="ui dividing header">Account Info</h4>
<div class="ui form">
........
</div>
</div>
This is my implementation, it works well.
JsFiddle link
HTML
<div id="v-container" class="ui grid middle aligned">
<div class="row">
<div class="column" align="middle">
<div class="ui raised card ">
<div class="ui small centered image no-background ">
<img class="image-margin image-border" src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<div class="ui header">TITLE</div>
<div class="meta">
SUBTITLE
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab, alias.</p>
</div>
</div>
<div class="extra content">
extra content
</div>
</div>
</div>
</div>
CSS
#v-container {
background: #ddd;
height: 100vh;
width: 100%;
}
.image-margin {
margin-top: 16px;
margin-bottom: 16px;
}
.image-border {
border-radius: 4px !important;
}
.no-background {
background: transparent !important;
}