I've been trying to get the search box to stay to the bottom of the div but to no avail, what happens is the search box goes off the screen, I've spent the past couple hours and I'm still struggling, if someone could help me I'd be most greatful, thanks Danielle.
Edit: I forgot to add this is inside a bootstrap layout
<div class="container">
<div class="col-md-6">
Left<br />
Left<br />
Left<br />
Left<br />
Left<br />
</div>
<div class="col-md-6">
<div class="input-group search">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
CSS code:
.search {
position: absolute;
bottom: 0;
right: 0;
Related
I am using the materializecss framework: http://materializecss.com
I want to have a login form inside the middle of the container:
I already tried setting the container div to 100% but that makes it 100% + the navbar so it will add a scrollbar. This is my html how I have it now:
<div class="container">
<router-outlet></router-outlet>
<app-login>
<div class="valign-wrapper full-height">
<div class="center-block">
<form novalidate="" class="ng-untouched ng-pristine ng-valid">
<div class="input-field">
<i class="material-icons prefix">perm_identity</i>
<input id="username" type="text">
<label for="username" class="">Gebruikersnaam</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password" type="password">
<label for="password">Wachtwoord</label>
</div>
<div class="valign-wrapper">
<button class="btn waves-effect waves-light center-block" name="login" type="submit">
Inloggen
</button>
</div>
</form>
</div>
</div>
</app-login>
</div>
I did see some answers on stackoverflow but those don't really make it responive and most of them are position: absolute which I dont want because I want it inside the container.
Give the div an ID.
Then, in style.css add:
#id {
width: 100%;
height: 100%;
}
I have the below HTML and CSS - how do I make the search-bar and add-contacts the same height? I currently have their height set to 100% in CSS to expand inside their container div but that doesn't work Is it possible to change their height even though they are bootstrap units?
HTML
<div className="container">
<form className="form-inline search-bar" role="form">
<div className="form-group has-success has-feedback">
<label className="control-label" htmlFor="inputSuccess4"></label>
<input type="text" className="form-control" id="inputSuccess4" type="text" placeholder="Search" onChange={handleChange}/>
<span className="glyphicon glyphicon-search flipped form-control-feedback"></span>
</div>
</form>
<div className="add-contacts">
<button type="button" className="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Contacts Keeper
</button>
</div>
</div>
CSS
.table-container {
margin: 20px;
}
.search-bar {
margin-left: 20px;
float: left;
height: 100%;
}
.add-contacts {
margin-right: 20px;
float: right;
height: 100%;
}
Just change the height of the search bar.
Or you could put search bar in same div as add contacts bar.
I find simpler is better with Bootstrap. I try to avoid adding custom CSS for most of the HTML elements already styled by Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<div class="col-md-3 text-left">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Search</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Search">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
</div>
</div>
</div>
<div class="col-md-6"></div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-primary">+ add stuff</button>
</div>
</form>
</div>
</div>
</div>
I am using bootstrap and am trying to fix a div to the top of the body-container div.
Using this css, I am able to accomplish fixing the div to the top of the container, but it spills outside the right of the body-container div:
.top-bar {
position: fixed;
z-index: 1030;
top: 60px;
width: 100%;
}
.top-bar .item-count h4{
text-align: center;
}
Here is the all my html/css: https://jsfiddle.net/rttvqa3k/
Check this if its helpful.. :)
OLD:
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
NEW:
<div class="navbar-fixed-top container" style="top:60px;">
<div class="panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
</div>
This answer explains the issue with position: fixed relative to a container. The answer does offer ways to accomplish this but it deals with known widths.
The problem with using "fixed" positioning is that it takes the
element out of flow. thus it can't be re-positioned relative to its
parent because it's as if it didn't have one.
You can set the width or the max-width (.top-bar width 750px) of the fixed element, but then you will have to deal with the media queries for different screen sizes.
I'll just post this so that you get things clear since it would be too long for a comment in the answer marked as correct.
There are several values you can use in the CSS property position.
Static, which is the default, relative, absolute and fixed.
Read more about that here.
If you use position: fixed; without defining top and left values, your element will default these values to where its parent element is rendered.
Here's an example for clarity:
If your body content has padding-left: 15px; your element with position: fixed; will have a default value of left: 15px;. The same goes for top, if your parent element is positioned (X)px top from the viewport, lets say X equals to 60 your position: fixed; element will default to top: 60px;
You can see this behavior here: (Notice that I did not reference bootstrap.js so you can see it has nothing to do with your problem.)
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4 {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
So the correct approach is to set this properties so they don't default.
This way:
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
Add overflow-x to your class description. This will add a scroll bar when needed
overflow-x:auto;
I am trying to have every line of text/elements centered horizontally so that my page looks lke this https://hootsuite.com/.
How do I style the page in CSS to look like that ?
Here is my page :
<div class ="wrap">
<% if user_signed_in? %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<%= render 'shared/user_info' %>
</section>
<hr/>
<br/>
<section class="stats">
<%= render 'shared/stats' %>
</section>
<section class="post_form">
<%= render 'shared/post_form' %>
</section>
</aside>
<section class="post_feed">
<br>
<h3>Post Feed</h3>
<%= render 'shared/feed' %>
</section>
</div>
</div>
<% else %>
</aside>
<div class="row">
<div class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true"></div>
<h2>Join <%= [2000, User.all.count].max %>+ artists.</h2>
<!-- <iframe src="terms" width= "100%" height= "600"></iframe>-->
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> I agree to the terms and conditions.
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Log in</button>
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</fieldset>
</form>
<button type="submit" class="btn btn-info"><i class="fa fa-facebook"></i> Login with Facebook</button>
<br/>
<br/>
<button type="submit" class="btn btn-primary"><i class="fa fa-twitter"> </i> Login with Twitter </button>
<br/>
<br/>
<button type="submit" class="btn btn-default"><i class="fa fa-linkedin"></i> Login with LinkedIn</button>
<br/>
<br/>
<button type="submit" class="btn btn-primary btn-warning"><i class="fa fa-google"></i> Login with Google </button>
<br/>
</div>
</section>
</div>
<%end%>
</div>
And my CSS:
.wrap{
display: inline-block
text_align: center ;
width:50%;
margin-left: auto ;
margin-right: auto ;
}
Not everything is centered on that page. The body text is aligned to the left. There are a couple of ways to center things.
1) adding the rule text-align: center to an element aligns to the center the child elements that don't have full width.
2) adding width: 50%; margin-left: auto; margin-right: auto aligns to the center an element that has a fixed width.
3) You can center things using flexbox. Go here to learn more abou this.
I think this should answer your questions.
body {
text-align: center;
margin-left: auto;
margin-right: auto
}
Note that elements that aren't inline, such as divs, will need to have a width defined in order for the margin: left/right styles to work.
Example:
.example-style {
width: 50%;
}
<div class="example-style">This content will be aligned in the center because all body elements are set to be centered by default.</div>
Setting elements as display: inline-block with text-align: center on the parent element will center most elements, as long as you aren't using any floats.
I was wondering if anyone could tell me how to space out 6 buttons. I want is so that three of the buttons are at the top, while the other 3 are below the top row. So basically it would be two separate rows of aligned buttons.
I know this seems fairly easy but I'm having a difficult time with it. Any help is really appreciated. Thanks.
You could simply do something as such:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
</div>
<div class="button-row">
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
</div>
</div>
You could do something like
#top
{
width: 100%
}
#bottom
{
width: 100%;
}
.button
{
float: left
width: 33%;
}
<div id="top">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
<div id="bottom">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
You can play with the button div width and add margins/padding ect.
To ensure column alignment, you could add a column class to each, and specify a width in that column class.
HTML:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="blah blah" class="c0"/>
<input type="button" value="lorem ipsum" class="c1"/>
<input type="button" value="really long button label" class="c2"/>
</div>
<div class="button-row">
<input type="button" value="button4" class="c0"/>
<input type="button" value="button5" class="c1"/>
<input type="button" value="button6" class="c2"/>
</div>
</div>
CSS:
.c0{
width: 80px;
}
.c1{
width: 100px;
}
.c2{
width: 150px;
}