I have a counter with increase decrease button. It's inside a model-content, but I can't center it in the middle of the modal. Can you help me?
https://i.stack.imgur.com/gkoMZ.png
<div class="input-group" style="width:25%;">
<span class="input-group-btn">
<span class="btn btn-white btn-minuse" type="button">-</span>
</span>
<input type="text" class="form-control text-center height-25" value=0 >
<span class="input-group-btn">
<span class="btn btn-red btn-pluss" type="button">+</span>
</span>
</div>
To center it you should use margin: 0 auto. And that will solve your problem
<div class="input-group" style="width:25%; margin: 0 auto;">
<span class="input-group-btn">
<span class="btn btn-white btn-minuse" type="button">-</span>
</span>
<input type="text" class="form-control text-center height-25" value=0>
<span class="input-group-btn">
<span class="btn btn-red btn-pluss" type="button">+</span>
</span>
</div>
Also, avoid using Inline CSS styles. If that didn't help please let me know.
Related
I am closing guest section when I click to outside the section it's perfectly closing but unfortunately I am trying to change any adults or click inside the div but it is closing to guest section please help me how can resolve that thanks.
Note:- Guest section should not be closed when I click to inside section or any change to quantity.
html view
<div id="guest-section" hidden>
<div class="_t0tx82">
<div class="_1lmb2fq" >Adults</div>
<div id="searchFlow-subtitle-label-stepper-adults"><p>Ages 13 or above</p></div>
</div>
<div class="">
<div class="input-group adult-input">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-default btn-number " data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" id="quantity" name="quantity" class="form-control input-number quantity" value="0" min="1" max="10" >
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-default btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<hr>
<div class="_t0tx82">
<div class="_1lmb2fq" >Children</div>
<div id="searchFlow-subtitle-label-stepper-adults"><p>Ages 2–12</p></div>
</div>
<div class="">
<div class="input-group adult-input">
<span class="input-group-btn">
<button type="button" class="quantity-left-minuss btn btn-default btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" id="quantityy" name="quantity" class="form-control input-number quantity" value="0" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="quantity-right-pluss btn btn-default btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
jquery
$(document).click(function(e) {
if(!$(e.target).is('#guest-section')) {
$("#guest-section").hide();
}
});
Try this:
You need to Check click area is not in the targeted element
$(document).click(function (e) {
if ($(e.target).parents("#guest-section").length === 0) {
$("#guest-section").hide();
}
});
I have an issue that I should display measurment units after a value in input. The problem is that standard Bootstrap's way to create a span is overkill here, because it requires too many space for it. For example:
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer"><i class="fa fa-trash fa-fw"></i></span>
<span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span>
<input type="text" class="form-control" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right">
<span class="input-group-addon input-source-observer">days</span>
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover">
</span>
</div>
Here it looks fine enough, but in other places it looks really ugly. I want something like
How can I do it with HTML5+CSS3 or/and bootstrap features?
By creating a new class you can adjust the properties of your input and input-group-addon:
The HTML:
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer"><i class="glyphicon glyphicon-trash"></i></span>
<span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span>
<input type="text" class="form-control addon-inline" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right">
<span class="input-group-addon addon-inline input-source-observer">days</span>
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover">
</span>
</div>
The CSS
.input-group-addon.addon-inline {
background: #fff;
color: #999;
border-left: none;
padding-left: 0;
}
.input-group .form-control.addon-inline {
border-right: none;
padding-right: 5px;
}
The Results:
http://www.bootply.com/BOTmrMi4jV
I've noticed something strange with Bootstrap 3's rendering of input groups, at least on Firefox and IE (Chrome untested):
As you can see, if there are two or more buttons preceding a text input, its left margin becomes wider.
Here is the code I used to reproduce this issue:
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
Is this expected/normal? How can I fix this?
Associated JSFiddle: https://jsfiddle.net/DTcHh/21418/
I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this:
.form-control {
border-left: 0;
}
But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>
So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.
Your structure is not correct per the Docs --> Multiple Button Input Group.
You're currently applying input-group-addon directly to the buttons, you want input-group-btn as the parent of the buttons (this is also why you're not seeing the btn-default styling also, it should be white, not grey).
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br/>
<br/>
<h1>Correct per Docs</h1>
<div class="input-group">
<div class="input-group-btn">
<span class="btn btn-default" id="basic-addon1">A</span>
<span class="btn btn-default" id="basic-addon2">B</span>
</div>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/>
<br/>
<h1>Questions Example</h1>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
</div>
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I am having trouble getting two components to align in using the <div display='table-cell'>. The first component is being displayed with a gap at the top. I want them to be displayed so that they are aligned.
Here's the JsFiddle: http://jsfiddle.net/66s7x5fr/
Here's the HTML:
<div class="form-group modifierColumn">
<div class="cell">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="cell">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>
</div>
Here's the CSS:
.modifierColumn .cell:not(:last-child) {
padding-right: 5px;
}
.cell {
display: table-cell;
}
Similar to nocarrier's response:
.cell {
vertical-align: top;
display: table-cell;
}
Try
.cell {
vertical-align: bottom;
display: table-cell;
}
Somewhat obscure rule. Baffles many. Check Understanding vertical align
Your problem is the the top-padding that the class cell has. Try to use a col-md-x to be more responsive.
<div class="form-group modifierColumn" tabindex="0">
<div class="col-xs-3">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="col-xs-4">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>