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%;
}
Related
This code:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Results in this:
I had to add the following CSS to get the buttons to sit on the bottom and not float in the middle, and I wonder if this has something to do with it:
.row {
position: relative;
}
.button {
position: absolute;
bottom:0;
right:0;
}
I suggest that you use Flexbox with media queries instead of absolute positioning. DEMO
#media(min-width: 768px) {
.row.flex {
display: flex;
align-items: flex-end;
}
}
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<div class="clear"></div>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
and the new code for class clear is:
.clear {clear: both;}
Now the button will always placed at bottom not float in middle.
If i m correct you want the save button next to textarea.
Having a class="form-control"on textarea will make it take the whole width.
Removing the class the code is as below :
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Now the Save Button will be placed exactly next textarea . You can use margin and padding to position it properly the way u like.
EDIT for aligned buttons:
<div class="row">
<div class="col-sm-2">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-default" style="margin-left:-30px;">Save</button>
</div>
<div class="col-sm-8 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
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'm using Bootstrap 3.3.7 and am having difficulty getting the search box and button to drop underneath the heading text when viewed on small screen.
I'd like to get it to stack as follows:
Large screen (as it is currently):
[Title] [search input] [submit button]
Smaller screen:
[Title]
[search input] [submit button]
Small screen:
[Title]
[search input]
[submit button]
Any help much appreciated. I've been at this for ages and my CSS skills are too lacking for me to make any decent headway. Thanks.
Large screen:
Smaller screen (button gets cut off):
Small screen:
Here's my code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- all the navigation stuff -->
</div>
</nav>
<!-- main content -->
<div class="container" role="main">
<div class="page-header">
<form action="" method="GET" class="form-inline pull-right">
<div class="form-group form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" name="q" id="search" placeholder="Search">
<span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>
</div>
<button type="submit" class="btn btn-lg btn-success">
<span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
</button>
</form>
<h2>Quite Long Header Text</h2>
</div>
<!--rest of page content -->
</div>
update
Thank you # Robert C. This is how things look with your suggestion:
and
and
The button has reduced in size which is great, but the input field now spans the entire width. I think it would all work just fine if the small button and input field were in the same row. This would mean that even on small devices I'd only need two stacks.
Could you suggest how I might go about reducing the size of the input box so that it will allow the button to stick to its left side on the same 'row'?
Thanks a lot
You will need to add some wrappers to make sure everything is lined up (or, alternatively remove the padding on your <h2>) but something along the following should provide you a Bootstrap Grid solution:
<div class="container" role="main">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<form action="" method="GET" class="form-main">
<div class="col-md-10 col-sm-10 col-xs-12">
<label class="sr-only" for="search">Search</label>
<div class="input-group">
<input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
<span class="input-group-addon group-icon"><span class="glyphicon glyphicon-user"></span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-xs-12">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="hidden-sm hidden-xs"> Search </span>
</button>
</div>
</div>
</div>
</div>
You can see a Bootply fiddle here: http://www.bootply.com/bhvdBwcX4b
To view the Bootply fiddle on smaller screens be sure to click the mobile icon, as simply resizing your browser will result in a rendering error warning.
Of the top of my head you need to use col and rows to work it out. Here is the col part...
<!-- main content -->
<div class="col-lg-6 col-md-6 col-sml-12">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-lg-6 col-md-6 col-sml-12">
<form action="" method="GET" class="form-inline">
<div class="form-group form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" name="q" id="search" placeholder="Search">
<span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>
</div>
<button type="submit" class="btn btn-lg btn-success">
<span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
</button>
</form>
</div>
I have restructured my previous solution for your problem. Have a look at the example here CODEPEN.
Hope it will be helpful to you
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- all the navigation stuff -->
</div>
</nav>
<!-- main content -->
<div class="section-main">
<div class="container" role="main">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-xs-12 col-md-6">
<form action="" method="GET" class="form-main form-inline nofloat-xs pull-right pull-left-sm">
<div class="form-group form-input-fields form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<div class="input-group">
<input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
<span class="input-group-addon group-icon"> <span class="glyphicon glyphicon-user"></span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success btn-submit">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</div>
</form>
</div>
</div>
<!--rest of page content -->
</div>
</div>
CSS:
.form-main {
margin-top: 15px;
}
.form-input-fields {
margin-bottom: 0;
}
.section-main {
margin-top:40px;
background-color: lightgrey;
padding: 20px 0;
}
.group-icon {
background-color:#fff;
border:0;
}
.input-search {
border:1px solid #fff;
box-shadow:none;
}
#media (max-width: 992px) {
.pull-left-sm {
float: left !important;
}
}
#media (max-width: 767px) {
.nofloat-xs {
float: none !important;
}
.btn-submit {
margin-top:10px;
}
}
enjoy :)
I am trying to place two elements side by side. I used css inline block but surprisingly its not working.
<div class="item-body" style="display:inline-block">
<!--- Element 1--->
<div style="width:150px;" class="input-group">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt===1?1:selectedItem.qnt-1;updateSelectedItemData();" class="btn spinner-down red" type="button">
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" style="text-align: center;" ng-model="selectedItem.qnt" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt+1;updateSelectedItemData()" class="btn spinner-up green-haze" type="button">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--- Element 2--->
<div > x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
Element 1 and element 2 is appearing in different line
You need to apply display: inline-block; to each element that you want to be displayed in the same line, not to their parent container. I've added background-color so it's clearly visible where each <div> is exactly located. For both inline-blocks to be aligned vertically, use css property vertical-align.
.item-body > div {
vertical-align: text-top;
}
<div class="item-body">
<!--- Element 1--->
<div style="display: inline-block; width:150px; background-color: #f8f8f8;">
<div>
<button>-</button>
</div>
<input type="text" style="text-align: center;">
<div>
<button>+</button>
</div>
</div>
<!--- Element 2--->
<div style="display:inline-block; background-color: #ddd;"> x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
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.