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.
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>
I'm having issues with input boxes overlapping each other as the screen starts shrinking down in width. Is there way to fix this in bootstrap 2 files or directly adjusting the css inline?
Here is the main page that holds the content.
<div class="content-center">
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="content-area">
//WHERE CONTENT IS LIVING
</div>
</div>
<div class="span3">
<div class="sidebar">
<div class="content-area">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual code where the content is at.
<div class="well">
<div class="row-fluid">
<div class="span4">
<h4>Dinner Banquet w Cocktail Reception Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span><INPUT NAME="xbrunchdinneronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getbrunchdinnertotal(this);" value="0" >
</div>
</div>
<div class="span4">
<h4>Wine Tour:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:18px;">Qty</span>
<input type="text" name="xwinetouronly" onKeyUp="javascript:getwinetouronlytotal(this);" placeholder="Enter Quantity">
</div>
<h4>Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xwinetouronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getwinetouronlytotal(this);" value="0"></div>
</div>
<div class="span4">
<h4>Exhibit Fee:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xhibittotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getgolftotal(this);" value="0" >
</div>
</div>
</div>
</div>
Here is the browser width at 1199px
And here is the browser width at 979px
So is there any way to fix this. I know I can mess with the media query in my own custom css but im also wondering if I can fix this in the bootstrap 2 source files. Or Just fix this directly with inline CSS
Put all your inputs into columns
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Dinner Banuqet
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Wine Tour
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Exhibit Fee
//input field
</div>
on a large and meduim screen there will be 3 columns with the content taking up the whole screen. On small and extra small screens the content will be vertically aligned. You can add the cols directly into your input-append class
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'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>
I am trying to create a vertical left menu using semantic-ui. Something like admin menu. To make it aligned into left, I tried to use rail element provided by semantic-ui. But my content is not visible.
I tried with example code provided in the site. But result is still the same. what am I missing here?
<body>
<div class="ui segment">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
I saw semantic-ui documentation site also using similar approach for showing their right menu. If this is not a best approach to create admin menu, please suggest any other better way using semantic ui.
You need to specify size and position of an central element. For example:
<body>
<div class="ui segment" style="left:400px;width:600px;">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
You can put them in a grid container, then add a four wide column before main segment.
You should also set the main segment eight wide column to make it at the center (p.s. 16 = 4 + 8 + 4).
Run the code snippet in full page please.
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet" />
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p></p>
</div>
<div class="ui four wide column">
</div>
</div>