Here's how my django filter form looks like:
I need to horizontally space them a little so that 'Name contains' and the search bar, and 'result' etc are not glued to each other.
Here's my html code:
<form action="" method="get" class="form-inline text-white justify-content-center mx-3">
{{myfilter.form|bootstrap}}
<button class="btn btn-primary" type="submit">
Search</button>
</form>
I have tried adding m-3, mx-3 etc but they don't work. Little help will be appreciated. Thanks!
First of all, I have to to explain you that you apply m-3 or mx-3 class to the form tag so that the mx-3 gives margin to form tab only and the Name contains and the search bar and result etc. are the child element of the form.
So the mx-3 class will work if you add it to the particular element.
Now, the solution for your problem should be:
If you put class="mx-3" to every form element.
Or you have to apply CSS as follow.
HTML
<form action="" method="get" class="weekly_calls_form form-inline text-white justify-content-center">
{{myfilter.form|bootstrap}}
<button class="btn btn-primary" type="submit">Search</button>
</form>
I have added my custom class to the form tag named weekly_calls_form
Now using this class I apply CSS to all element of the form tag.
CSS
.weekly_calls_form > *{
margin: 0px 5px;
}
This CSS apply to all the direct child elements of form.
Related
I have the following navbar at the top of my page (heavily copied from a bootstrap 3 example) - you can ignore the Django template code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand plain" href="{% url 'home' %}">Miniquad Maps</a>
</div>
<form method="POST" action="{% url 'spot_search' %}" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="spotsearch" type="text" class="form-control" placeholder="Search spots" name="spotsearch">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
{% csrf_token %}
</form>
</div>
</nav>
I am trying to figure out how to resize the search input (the one with id="spotsearch"). I would like to make it much wider, and I have tried many things, but the element seems to be constrained by something else (some bootstrap class no doubt, but I have not been able to figure out which one).
I have tried using .col-size-* in various places (among other things), but nothing seems to affect the input's width.
What am I missing here? Any suggestions as to how to resize the input, or where to look for good information on form sizing would be appreciated (I have read through the bootstrap docs on forms, but this has not been helpful so far in this respect).
Here is an example of the navbar: https://jsfiddle.net/38apotau/
I would like to resize the input to be at least twice the size it is in that example.
The width of the element is set to width: auto by bootstrap, giving the class hierarchy you have set.
You could override the input's width by giving it a specific pixel size:
#spotsearch { width: 350px; }
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>
This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.
I have a form with an input and a button, styled with bootstrap.
I am using grid colums to give the input and the button their own width.
But it seems to change the input's width, I have to assign the col-* class to the div surrounding the input, whereas the button can receive the class on itself.
This ends up with the input not using the width I was hoping to give it.
<div class="container">
<div class="row">
<form name="search" role="search">
<div class="form-group col-sm-10 col-xs-12">
<input type="text" class="form-control input-lg" placeholder="Hey"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
Search
</button>
</div>
</form>
</div>
</div>
Here is a jsfiddle where I added a line on the page as a reference to show up to where the input should go on the left. As you make the fiddle window smaller, the button goes under the input and reaches a full lenght, but the input still has a gap on both sides.
It is because the column classes are meant to wrap the elements and give them structure. If you give your button those classes, it will give that element the full width instead of the typical padding.
I moved the column classes onto the form-group instead and made a simple class called .btn-full that sets the width: 100%; and it achieves what you want.
http://jsfiddle.net/SXus5/
If you want the button to be the full width of the container, just add the class 'btn-block' to it. Any inputs inside of a form group will automatically expand to fill their container. Instead of adding the .col classes to the form group, add it to a div the form is contained in.
Here's a modified version of your jsfiddle with the input, button and line all the same width.
<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>
Firefox is ignoring my margin-bottom css property. Works fine in Chrome.
My Code is simply:
<input type="button" value="Continue Shopping" onClick="history.back(-1);" class="btn btn-orange pull-right mr10" style="margin-bottom:10px;">
What's happening is that the 'Continue Shopping' button is clipping over the product table.
http://rsatestamls.kaliocommerce.com/cart.aspx
As a previous answer mentioned, you are specifying pull-right on your button which floats the element to the right and breaks it out of the DOM. You can specify the inline style clear:both; that was mentioned, or you can go another route.
Since you are already using Bootstrap, you could wrap your .btn elements with a div.row element which would already include the clear:both; rule.
The bootstrap CSS has the following specified:
.row:after { clear:both; }
So, something like:
<div class="row">
<input type="submit" class="btn btn-orange pull-right" value="CheckOut">
<input type="button" style="margin-bottom:10px;" class="btn btn-orange pull-right mr10" onclick="history.back(-1);" value="Continue Shopping">
</div>