I have this html using materialize css
<!-- Sign Up Card row -->
<div class="row">
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<span class="card-title"><h3>Sign up to find out more.</h3></span>
<form class="container">
<div class="input-field col m6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field col m6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- End of Sign Up Card row -->
Which is giving me this result
When I remove the col m6 classes from the input-field divs it shows them correctly within the card but stacked one on top of the other.
How do I achieve having both divs inside the card and positioned on the same row?
My UI Design of desired composition of card
Update
Working JSFiddle
Note: Modifying the css itself is undesired and a last resort. The prime solution should use only materialize css for which I think I should have been more specific.
use <div class="row"></div> to wrap around the div.col tags
jsfiddle
<!-- Sign Up Card row -->
<div class="row">
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<span class="card-title"><h3>Sign up to find out more about Two Lanterns.</h3></span>
<form class="container">
<div class = "row">
<div class="input-field col m6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field col m6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- End of Sign Up Card row -->
Try this way, replace container block with following code.
<form class="container" style="display: flex">
<div class="input-field ">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field " style="padding-left:16px">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</form>
Related
I'm using Bootstrap 3 and I have set up this grid for my webpage:
<div class="container">
<div class="header">
<div class="top-nav">
<div class="row">
<div class="col-1">
<img src="https://sitename.com/logo.jpg">
</div>
<div class="col-7 mid-nav">
<!-- Search box & Navbar comes here -->
</div>
<div class="col-1" style="margin-top:30px !important;">
<i class="fa fa-shopping-cart fa-4x sabad-kharid"></i>
</div>
<div class="col-3">
<form method="POST" action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
And the result is shown in this:
As you can see the Bootstrap form does not appear in the col-3 class and it appears at the below of this row. However it should be placed at the left side in the div with class of col-3.
So what's going wrong here? How can I solve this issue?
You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.
I have this long form for users with several html elements.
I used Materialize framework for it.
Here's the collpsible link.
The form is getting too long.
How to remove some space between elements and make it all narrower so I don't need to scroll down?
I didn't find it in framework options.
Here's the html code for the elements:
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">add</i>
<input id="stat" type="text" class="validate">
<label for="stat">Добавить новую статистику</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">assignment</i>
<input id="des" type="text" class="validate">
<label for="des">Добавить описание статистики</label>
</div>
</div>
<div class="row">
<div class="input-field col s1">
<i class="material-icons prefix">trending_down</i>
</div>
<div class="input-field col s8">
<h6>
Добавить минимальное значение
</h6>
</div>
<div class="input-field col s3">
<input id="des" type="text" class="validate">
</div>
</div>
<div class="row">
<div class="input-field col s1">
<i class="material-icons prefix">trending_up</i>
</div>
<div class="input-field col s8">
<h6>
Добавить максимальное значение
</h6>
</div>
<div class="input-field col s3">
<input id="des" type="text" class="validate">
</div>
</div>
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" id="btn"><i class="material-icons right">send</i>Добавить</a>
<p> </p>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Добавить данные в статистики:</div>
<div class="collapsible-body">
<span>
<div class="row">
<div class="input-field col s1">
<p>
<i class="material-icons prefix">wb_sunny</i>
</p>
</div>
<div class="input-field col s7">
<select class="icons browser-default" id="weeksSel2" onChange ="getWeekText2();">
<option value="" disabled selected>Выберите неделю</option>
</select>
</div>
</div>
</span>
</div>
</li>
</ul>
</div>
<!-- end of container -->
I'm not very much hands on the materializecss, but I found the same problem somebody is facing, have a look this might can help you out.
As per below link you need to consolidate all the col element in the single row.
Spacing Between Rows with Materialize CSS
You might want to remove margin-bottom from .row.
<div class="row">
Add another class to your div with class row, say custom-row
<div class="row custom-row">
and add style:
.custom-row {
margin-bottom: 0 !important; /*this will override margin-bottom:10px from '.row'
}
This will keep all the styles from .row but override the margin-bottom
Hope it helps!
I trying to make a search bar with bootstrap smth similar to holidaypiratescom search field.
I need to have min width on first and last button, while letting the 3 form fields to flex. If i set the width directly with css(min-width) the button element is sticks outside of the card when i shrink the screen. Have no idea how to do it, any suggestions?
<div class="card">
<div class="search-box d-md-inline-flex">
<!-- col1 -->
<div class="card border-0">
<input class="btn btn-primary" type="text" name="" value="All categories">
</div>
<!-- col2 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
</div>
<!-- col3 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
</div>
<!-- col4 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
</div>
<!-- Submit -->
<div class="card border-0">
<input class="btn btn-primary" type="submit" name="" value="go">
</div>
</div><!--/search-box -->
</div> <!-- /card -->
<div class="card container">
<div class="container">
<div class="search-box d-md-inline-flex">
<!-- col1 -->
<div class="card border-0 p-3">
<input class="btn btn-primary" type="text" name="" value="All categories">
</div>
<!-- col2 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
</div>
<!-- col3 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
</div>
<!-- col4 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
</div>
<!-- Submit -->
<div class="card border-0 p-3">
<input class="btn btn-primary" type="submit" name="" value="go">
</div>
</div><!--/search-box -->
</div>
</div>
Use the container class to wrap the content. For responsive use lg, md, sm for the classes.
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
I'm trying to add a search glyph to a button at the end of this centered search bar.
Below is the style I want:
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">Search</span>
</div>
</div>
</form>
<br><br>
</div>
</div>
</div>
But I want to to have a button a - something like:
<span class="glyphicon glyphicon-search"></span></button>
instead of the
<span class="input-group-addon">Search</span>
but when I do this the button moves onto the next line and throws off my styling.
Using Bootstraps form-inline class and form structure will resolve your issue.
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center col-md-6 col-md-offset-3">
<h1>Jumbotron with form</h1>
<form class="form-inline" role="form">
<div class="form-group form-group-lg">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn btn-default btn-lg pull-left">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<br><br>
</div>
</div>
</div>
Try this:
DEMO
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span> Search</button></span>
</div>
</div>
</form>
<br>
<br>
</div>
</div>
</div>