I need to use text box with a glyphicon in one straight line, here what I've done:
http://plnkr.co/edit/GZQeGTqDsvTh9XsXmMFy?p=preview
<div class="w3-row" style="vertical-align:middle">
<div class="w3-col s6">
<input ng-readonly="true" type="text" ng-model="login" placeholder="Login" class="form-control" />
</div>
<div class="w3-col s4">
<input class="form-control" ng-readonly="true" type="text" ng-model="password" placeholder="Password" />
</div>
<div class="w3-col s2">
<button class="glyphicon glyphicon-refresh btn btn-default"></button>
</div>
</div>
It looks alright, but the glyph button is slightly below than the bottom line of text inputs, I want its height to be stretched to those inputs, or, at least, to be in the middle relatively to their center, then it will be good looking.
Please help me find the solution.
Notice:
Either w3.css or angular-ui's bootstrap can be used to solve this issue.
The solution should not depend on using the "form-inline".
The best solution would be the one which doesn't use "row" "col" classes whatsoever, because they make it impossible to stretch line horizontally to 100% and fill each column without making it look ugly!
Thank you.
change your button markup to this
<button class="btn btn-default">
<span class="glyphicon glyphicon-refresh "></span>
</button>
plunk
Related
I'm making a form-inline using Bootstrap 4, but when I use a button, the position of the button is always at the top of the row, I want the button's position to be the same as the input field's position, which is in the middle of the row.
<form role="form" id="form_tambah_kriteria" class="margin-bottom-0">
<div class="form-row">
<div class="form-group col-md-4">
<label>Tipe Decision Maker</label>
<div class="input-group">
<div class="input-group-append"><span class="input-group-text"><i class="ion-ios-contacts"></i></span></div>
<input type="text" name="tipe_dm[]" class="form-control" placeholder="Tipe Decision Maker">
</div>
</div>
<div class="form-group col-md-4">
<label>Owned by:</label>
<div class="input-group">
<select class="form-control" name="owner_dm">
<option value="">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<button class="btn btn-danger">Delete</button>
</div>
</form>
The following is Codepen
The simple fix is to wrap the button in a form-group and prefix it with some invisible text ( or <br />). But it would be dead wrong, just a handy hack, because it would simply hide the underlying problem with your codepen.
The proper fix would be to:
use latest stable version of Bootstrap - your pen currently uses v4.0.0-alpha5 which doesn't contain a lot of bugfixes and, among others, does not contain Bootstrap's flexbox classes)
wrap the button in a .form-group.col-md-4
use d-flex align-items-end classes on the .form-row
Working example: https://codepen.io/andrei-gheorghiu/pen/KKKNxZg
Note: until you start using the latest stable version of Bootstrap's CSS, you'll keep running into problems which seemingly don't make any sense, because the version you're using is a pre-release which does not include a lot of what most Bootstrap 4 examples take for granted.
the solution is easy just add <br> before the button Delete for new line...like this:
<br> <button class="btn btn-danger">Delete</button>
You should put the button in the third column grid and use the <br /> .
you should do it as below:
<div class="form-group col-md-4">
<br />
<button class="btn btn-danger">Delete</button>
</div>
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
I've added both feedback and a button addon to an input field in my form. My HTML is the following:
<div class="form-group has-feedback">
<label class="col-sm-4 control-label" for="authorization_id">AutorisationsID</label>
<div class="col-sm-4">
<div class="input-group">
<input name="authorization_id" class="form-control" type="text">
<span class="glyphicon form-control-feedback"></span>
<span class="input-group-btn">
<a href="#" id="authid-info-btn" tabindex="0" class="btn btn-info" role="button" data-position="auto right" data-container="body" data-toggle="popover" data-trigger="click" data-content="And here's some amazing content. It's very engaging. Right?">
<span class="glyphicon glyphicon-question-sign">
</a>
</span>
</div>
</div>
<div class="col-sm-4 control-label control-label-left-align"></div>
</div>
Here's what it looks like:
And here's what I want it to look like
The feedback is positioned wrong when the button addon is present. Am I missing something or does Bootstrap not support this design?
I slapped your content into a fiddle here: http://jsfiddle.net/DTcHh/2459/
But I don't know how to get the X to come up. Is there any way you can emulate that in the fiddle?
It will be something like
.redX {
position: relative;
left: -10px;
}
Or possibly a small adjustment to margin or padding. It could be a lot of things but likely a simple-ish fix in css. A live example would be best, really.
I searched a lot and FOUND a few references on STACK but I am posting this anyways (it is a "duplicate" question but the accepted answer doesn't seem to work in any of my cases)
STACK LINK:
bootstrap: align input with button
I can't seem to display a button inline with form-control element (input text),,
I have three versions of the same thing
Fiddle: http://jsfiddle.net/7Cu9w/9/
<div class="form-inline col-xs-4">
<label class="control-label">New Tag: </label>
<input class="form-control"/>
<button type="button" class="btn btn-primary">Add</button>
</div>
<br/><br/>
<div class="form-horizontal col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
<br/><br/>
<div class="input-append col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
I found a variety of similar ideas and answers but no matter what I do, they do not work..
My fiddle:
http://jsfiddle.net/7Cu9w/9/
Can someone please help me with this?
You can use Bootstrap's column properties to specify the layout you would like WITHIN YOUR .form-inline, like so:
JSFiddle.
If that's the property you would like all your input/button pairs to have, I would recommend using an &:extend() and a specific .input-button class in your LESS, but that's how you would go about solving this problem.