How can I create a border around an input button? - css

Here's a fiddle
I have this code where I tried to make a button have a blue line around it. But when I ran the code I just get a blue line at the top of the button. I added disply: inline-block but that doesn't seem to work. Is there some way I can make the div's border surround the input button?
<div id="A">
<div style="border: 1px solid Blue">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>

Why all those divs?
See demo Fiddle.
HTML:
<form id="A" action="">
<fieldset>
<span><input id="button1" type="button" value="Caption" onclick="" /></span>
<label id="B" for="button1">ABC</label>
</fieldset>
</form>
CSS:
#A span {
border: 1px solid blue;
}

Remove "float: left" from your input and add it to the surrounding div.

Setting height on a DIV that wraps INPUT can help:
<div id="A">
<div style="border: 1px solid Blue; height: 20px;">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>

<div id="A">
<div style="border: 1px solid Blue;float:left">
<input style="display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left; margin-left:100px;">ABC</div>
</div>

If you want the text ABC inside the blue border you have to move it inside the div with the border, combined with the height "trick" as suggested by spektom.
<div id="A">
<div style="border: 1px solid Blue; min-height:20px">
<input style="float: left; display: block"
type="button"
onclick="doTest('total'); return false;" />
<div id="B" style="display: block; float: left;">ABC</div>
</div>
</div>

Related

bootstrap input group with progress bar

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.

bootstrap - make input stretch when hiding sidebar

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.

Tweak pull-right in bootstrap

I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.
http://www.bootply.com/KRnvb6Kk4W
HTML :
<form id="LoginForm">
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center col-lg-3 border-blue">
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div>
<span id="spMsg"></span>
<button type="submit" class="btn-login-base pull-right">
<i class="fa fa-share-square"></i>
</button>
</div>
</div>
</div>
</div>
</form>
CSS :
.border-blue {border:1px solid blue;}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering
{
float:none;
margin:0 auto;
padding:0;
}
.btn-login-base
{
width:32px;
height:34px;
padding:0;
background:transparent;
border:none;
}
//bootstrap's .pull-right{float:right !important;}
Add .clearfix class to .border-blue, like this:
<div class="centering text-center col-lg-3 border-blue clearfix">
It will force the container not to collapce because of the inner floated elements.

Browsers with different design for same div

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/

float does not align div elements properly

HTML:
<div class="table" style="display:table;width:600px">
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Flow ID</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="flowid" size="20" id="flowid"/>
</div>
<div style="width:10%,float:right;display:table-cell"> [Default : 32] </div>
</div>
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Traffic Class</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="traffic" size="20" id="traffic"/>
</div>
<div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
</div>
</div>
CSS:
div.table {
font: 81.25%/1 arial,helvetica,sans-serif;
font-weight:bold;
background-color:rgb(241,241,241);
margin: 0 auto;
width: 50%;
text-align:center;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: rgb(229, 229, 229);
}
Output I am getting is :
Why this strange behaviour ?
Althoguh first row seems to be correctly organized but still table-cell elements are not aligned completely to left and right. For second row, I have no clue what's going on ?
I am new in using divs as I used to do all these things with tables so please excuse if missing something trivial.
There is no need for the floats and you also had a typo in one of the inline styles:
width:10%,float:right; should be width:10%;float:right;.
Here is it working:
http://jsfiddle.net/sQ4Nb/
Here is how you should have your code:
http://jsfiddle.net/cS35y/
And here is a HTML table version:
http://jsfiddle.net/53fKu/
Why do you use div elements if you decide to display them like a table?
You may try something like this: jsfiddle
<ul id="wrapper">
<li>
<div style="width:30%;" class="cell">Flow ID</div>
<div style="width:55%;" class="cell">
<input type="text" name="flowid" size="20" id="flowid" />
</div>
<div style="width:15%;" class="cell">[Default : 32]</div>
</li>
<li>
<div style="width:30%;" class="cell">Traffic Class</div>
<div style="width:55%;" class="cell">
<input type="text" name="traffic" size="20" id="traffic" />
</div>
<div style="width:15%;" class="cell">[Default : 0]</div>
</li>
</ul>
#wrapper {
width: 600px;
list-style: none;
}
.cell {
float: left;
}

Resources