I want to group a progress bar, "browse" button and a "upload" button in a single row using bootstrap input grouping. Im using bootstrap 4 and I tried following.
<div class="form-group row">
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<div class="custom-file-label">
<div class="progress" style="height:40px">
<div class="progress-bar" role="progressbar" aria-valuenow="25" style="width: 25%" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Upload</button>
</div>
</div>
</div>
but the styling goes wrong as below.
I want following output.
Progress bar should be same height as buttons.
Progress bar should be ended at the "browse" button and should not overlap.
Progress bar should be aligned to the "browse" button.
it should be as below.
This two line of css can fix your problem
.custom-file-label {
padding: 0;
}
.btn{
height:40px;
}
.progress{
box-sizing: border-box;
width: 75%;
height: 40px;
}
.custom-file-label::after {
width: 25%;
height: 40px;
}
Please override the padding given by "custom-file-label" class.
Refer: http://jsfiddle.net/maloth_n/kh9jm8do/1 for solution
Code:
<div class="form-group row m-2">
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02" />
<div class="custom-file-label">
<div class="progress" style="height:40px">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="25"
style="width: 25%"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Upload</button>
</div>
</div>
</div>
<style>
.custom-file-label {
padding: 0 !important;
}
</style>
Add this css rule:
.form-group .custom-file-label {
padding: 0;
}
button.btn.btn-outline-secondary {
height: 40px;
border-left: 0;
border-color: #ccc;
}
Add classes in HTML for respective elements and update CSS rules.
Related
I have a page using a masterpage in asp.net 4.0. My masterpage has header which has a search box. Header has css position fixed and have z-index 10.
I am trying to create a search instruction which will open when user types anything. my instruction box do not show as floatig over header instead it opens inside header and expands it. Here are my css and html
header {
width:100%;
display:inline-block;
background-color:#ef4023;
position:fixed;
z-index:10;
}
header #Guide {
width: 100%;
z-index: 5;
margin-right: -1px;
position:relative;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>
You have to use position: fixed also on the instruction box, with according position settings. (relative will put it into the document flow, thereby taking up space, and absolute won't work since you don't have a relative parent for it.)
header {
width: 100%;
display: inline-block;
background-color: #ef4023;
position: fixed;
z-index: 10;
}
header #Guide {
width: 100%;
z-index: 15;
margin-right: -1px;
position: fixed;
top: 110px;
left: 0px;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>`
How to make the text input stretch as well when hiding sidebar?
Look at example on jsFIDDLE
html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div class="form-group">
<label for="idf">Name: </label>
<input type="text" class="form-control" id="idf" aria-describedby="h">
<span id="h" class="help-block"></span>
</div>
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both">/div>
</form>
</div>
</div>
</div>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 3px; height:38px;}
#cc {margin-left: 5px; height:38px}
#bb {margin-right: 20px; float:right}
When you hide the sidebar you will see the content moving to the left. There is one text input and I don't know how to make that input stretch with jumbotron. I'd like to be able set the min width as well.
Second question: is there a better way to make all elements inline and horizontally aligned? I had to separate checkbox from label and do it as you can see.
I found some information in other sources and put it all together. It seems to be working fine. So far nobody was able to answer my question (it isn't that simple), but still if someone knows a better way and cleaner of doing this, I'd like to learn how to do it better. This is what I did:
html:
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div id="cell-1">
<label for="idf">Name:</label>
</div>
<div class="form-group" id="cell-2">
<input type="text" class="form-control" id="idf" aria-describedby="h" style="width:100%">
<span id="h" class="help-block">Warning: this field can't be empty!</span>
</div>
<div id="cell-3">
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both"></div>
</div>
</form>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
#cell-1 {display: table-cell; vertical-align:top; padding-top:7px}
#cell-2 {display: table-cell; width:50%; padding-left:5px}
#cell-3 {display: table-cell; width:50%}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 7px; height:38px;}
#cc {margin-left: 5px; padding-top: 4px; height:38px}
#bb {margin-right: 20px; padding-top: 4px; float:right}
.help-block {font-size: 12px;color:red}
Updated example on jsFIDDLE.
http://www.bootply.com/124116
I have two nested columns but I cannot seem to center their contents inside them. If I get rid of the "float: left", then it splits to two lines which I do not want. What do I need to do to center this? Just to be clear I want to center the contents of cas_subboxA and cas_subboxB which I added borders around.
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Calculator
</div>
<div class="panel-body">
<form id="cas_form">
<div class="row" id="cas_input_row">
<div class="col-md-6" id="cas_subboxA">
<input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
<button class="btn btn-default" id="cas_datebutton" type="button">
<i class="glyphicon glyphicon-calendar"></i>
</button>
<div id="cas_radios">
<input name="operation" type="radio" value="plus">plus<br>
<input name="operation" type="radio" value="minus">minus
</div>
</div>
<div class="col-md-6" id="cas_subboxB">
<input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
<div id="cas_radios">
<input name="cal_or_work" type="radio" value="calendar">calendar days<br>
<input name="cal_or_work" type="radio" value="work">work days
</div>
</div>
</div>
<div>
<div id="cas_buttons">
<button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button>
<button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i> Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS:
#cas_form {
margin-top: 20px;
text-align: center;
}
#cas_input_row {
text-align: center;
}
#cas_datepicker {
width: 110px;
float: left;
}
#cas_datebutton {
float: left;
}
#cas_radios {
float: left;
margin-top: -4px;
margin-left: 20px;
height: 40px;
vertical-align: baseline;
text-align: left;
}
#cas_subboxA, #cas_subboxB {
text-align: center;
border: solid 1px;
}
#cas_text2 {
margin-left: 20px;
width: 70px;
float: left;
text-align: center;
}
#cas_buttons {
margin-top: 20px;
text-align: center;
}
Are you trying to center the content's inside your input fields or the panel-heading or both? Try adding a div .text-center center after your .container that'll center the panel heading. You can center the contents of your fields using .text-align: center on your #cas_datepicker hope this helps.
How do you get centered content using Twitter bootstrap?
I have a couple of different issues.
I have a div with a couple of other divs and some controls in it. My biggest issue is that it does not look the same in Chrome as it does in other browsers. As it is right now, it looks as following:
And the biggest issue is with Chrome, where the textbox to the right of the "width:" text goes down onto the next line. The code for the box can be seen in this JSFiddle or as as following:
<div id="div_properties" class="redBorder left" style="clear: left; display:
<div class="right">
<a href="#" id="closePropertiesWindow">
<img src="close.png" title="Close window"></a>
</div>
<div class="centered noMargin whiteBackground">
<h3 class="noMargin">Properties</h3>
</div>
<hr class="noMargin noPadding">
<div id="div_properties_content" style="display: block;">
<div class="noMargin propertiesControl" prop="text" style="width:100%;">
text:
<input type="text" id="propertytextTextBox" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="width" style="width:100%;">
width:
<input type="number" id="propertywidthNumber" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="italic" style="width:100%;">
italic:
<input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked">
</div>
<div class="noMargin propertiesControl" prop="bold" style="width:100%;">
bold:
<input type="checkbox" id="propertyboldCheckBox" class="right">
</div>
<br>
<input type="button" id="savePropertiesButton" value="Save" class="right">
</div>
</div>
And the CSS is as following:
#div_properties {
margin-top: 5px;
background-color: #F0F0F0;
width: 300px;
float: left;
min-height: 75px;
}
.redBorder {
border: 1px solid red;
}
.noMargin {
margin: 0 0 0 0;
}
.left {
float: left;
}
.right {
float: right;
}
(Those are all the related classes in this scope, the other classes defined on the items have no styles, but are being used in the JavaScript.)
Also, another issue I'm having is the "box border" around the close-image in IE. This is not a big issue, but if anyone knows what is causing it, it would be fantastic.
Its the floating that's causing the issue. You need to clear them.
.propertiesControl {
clear:both;
}
http://jsfiddle.net/JWDkM/2/
I have 3 divs in total. One is a container for the other left and right divs. There will be so many containers. Everything is okay now, but when the window is resized the CSS should avoid overlapping the divs. Instead, it should wrap to the next line. Please provide me your suggestion. Below is my code.
Css Code
.divmain
{
width: 100%;
padding: 15px;
height: auto;
}
.divmain .divleft
{
float: left;
width: 16%;
}
.divmain .divright
{
float: left;
width: 84%;
}
View Code
<div style="width: 100%;">
<div class="divmain">
<div class="divleft">
<label class="label">Date</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Status</label><span class="mand">*</span>
</div>
<div class="divright">
<label class="label">Pending</label>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Reference No</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
</div>
Demo