I have small buttons on either side of a input text box. It displays OK at desktop screen widths. But around 700 pixels all three objects wrap to separate rows. I've tried putting them into a row and column . That only made things worse; didn't display inline even at wide screen widths.
<div class="form-inline">
<div class="row">
<div class="col-xs-9">
<button id="mnBlue" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<div class="form-group">
<label class="sr-only">Blue Quantity</label>
<input class="form-control" id="QuantityEdit_Blue" name="QuantityEdit.Blue" type="number" value="" />
<button id="plBlue" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
</div>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="control-label">Quantity</label>
<div class="input-group">
<button id="mnRed" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<input class="form-control" id="QuantityEdit_Red" name="QuantityEdit.Red" type="number" value="" />
<button id="plRed" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
<span class="field-validation-valid text-danger" data-valmsg-for="QuantityEdit.Red" data-valmsg-replace="true"></span>
</div>
</div>
The top buttons and text box in the linked screen capture shows the display I'm trying to achieve on a mobile phone sized screen. The bottom shows what is happening at mobile screen widths.
Flickr: Example Screen Capture
Related
I want to place button beside input text
※ example [input text][button]
And button size should be fixed.
Even though the window size change, button size should be fixed and should be beside input text.
Below is my code.
<div class="form-group row">
<div class="col-sm-2">
<label>...</label>
</div>
<div class="col-sm-8">
<input type="text">
</div>
<div class="col-sm-2">
<button type="button"></button>
</div>
</div>
This code makes button move when window size is small.
And also makes button small, so that unavailable to see value inside button.
I want to know how to code as I expect.
If you want the layout for mobile devices you can use col-xs-2 col-xs-8 col-xs-2 (if you are using bootstrap 3) if you are using bootstrap 4 you can use only col-2 col-8 col-2. But if your screen size is small, grid makes your button small according to your screensize.
As the previous one did not work,
Please try this.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Go</button>
</div>
</div>
hope this one helps.
Here the class i've used is from bootstrap. This will solve your problem
<form style="margin-left: 100px;" >
<div class="form-group">
<label for="uname">Email</label>
<input type="email" class="form-control" name="email" placeholder="Enter your email" style="width: 30%">
</div>
<button type="submit" name="submit" value="Submit" class="btn btn-lg btn-primary btn-block" style="width: 20%;">Log In</button><br>
</form>
I am using bootstrap to build an responsive website (small social network), I used glyphicons with buttons and it works fine on full screen, my problem is that the glyphicons go outside the border of the button whenever the browser width is decreased image included:
the code is:
<div class="row">
<div class="btn-group-vertical col-sm-2" style="width: 9% ">
<br/><br/><br/>
<button type="button" class ="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-up" style="vertical-align:middle;text-align: center;"></span></button>
<button type="button" class="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-down" style="vertical-align:middle; text-align: center"></span></button>
<button type="button" class="btn btn-default" style="font-size:3vw"> <span class="glyphicon glyphicon-tags"></span> </button>
</div>
So my question is: How to make this responsive, whatever is the size of the screen?
You have the button width set to style="width: 9%". So when the screen is smaller the button width will be 9% of the screen.
You can use the bootstrap classes to get your desired output without breaking the icons and buttons. Just use input instead of button and use type = button.
This is a sample code. Hope this helps.
<div class="form-group">
<label class="control-label" for="but1"></label>
<div class="input-group">
<span class="input-group-addon"><i class=glyphicon glyphicon-thumbs-up"></>
<input type="button" class="btn btn-default" id="but1" value="button" />
</div>
</div>
This will create the button with the icon and you can style them with CSS.
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.
I am trying to have a textbox in bootstrap, which has the same look and feel as the one you place inside a panel (large, rounded corners, full div length). On the right side of such a textbox I want to have a few buttons.
I tried a bunch of stuff - either it becomes correctly aligned, but the textbox loses all styles. Or the textbox looks correct, but the buttons wrap down to next line!
Some of what I have tried:
<div class="row">
<div class='col-md-8'>
<input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</div>
</div>
and...
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
and...
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
Nothing works!I am thinking it shouldnt be so hard to place a bunch buttons next to a textbox that takes all available space and is nice and large :(
Any help is very much appreciated
Couldn't you just do it like this?
<div class="form-group">
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Stuff2" />
</div>
<div class="col-md-3">
<button class="btn btn-primary">Save</button> <button class="btn btn-danger">Delete</button>
</div>
</div>
As far as I know that to combine textbox and button, I use:
class="input-group"
and give class="form-control" to all textboxes
You mean like this follows:
<div class="row">
<div class='col-md-8'>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn">Sign up</button>
</span>
</div>
</div>
</div>
If it is what you mean, here's the demo:
Demo in jsFiddle
I'm trying to create a single row with search inputs (a text input and an 'attached' button) at the left, and a button at the right (the bit above the grid):
Here's the code:
<form class="row form-inline">
<div class="form-group col-xs-6">
<div class="input-group">
<input name="search" type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-xs-6">
<a class="btn btn-default btn-sm pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
The problem is that the width of text input is too small at the 'lg' and 'md' browser sizes, and only increases to something that looks OK when the browser is at smaller sizes. What's the best way to increase the width of the search input at larger browser sizes?
Try this as well
<form class="row form-inline">
<div class="form-group col-md-8">
<div class="input-group">
<input name="search" type="text" class="form-control col-md-6">
<span class="input-group-btn col-md-2">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-md-4">
<a class="btn btn-default pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
why dont you set the width on the input using bootstrap classes? e.g.
<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">
As you can see in Bootstrap DOC form-inline require setting a width for input componentes:
http://getbootstrap.com/css/#forms-inline
To solve that problem I have custom classes for that:
.input-width-X {width: X}
.input-width-Y {width: Y}
...
and use media queries for this classes in order to apply them just when you are not in XS mode, because Bootstrap set 100% width on it.
Sorry about my english :)