Please Look at the Snippet Image below
I created a div that has position:fixed; and noticed a white space on left side that is taking by position 15, I am seeing it for the first time.How to fix it.
How to change the positionto 0.
<div class="nav-color" style="position:fixed; z-index: 5; bottom: 0; padding: 10px; background-color: blue; " class="col-md-12">
<input type="text" class="form-control col-md-6" placeholder="Type Here" style="margin-right: 10px;" />
<span class="input-group-btn col-md-6">
<button class="btn btn-default " type="button" style=" margin-left: 10px;margin-right: 10px;">Add</button>
<button class="btn btn-warning " style="color: white;">Logout</button>
</span>
</div>
As i noticed that just by making bottom:0; the whole element is sticking to bottom, I added left:0; and It corrected the position to left.
Provide value according to which side the gap is.
left:0;right:0;
Related
I'm attempting to set up a bottom control div which will contain buttons. This control div will be stuck to the bottom of the page like a bottom navbar or footer. I'm using Bootstrap so my control container div is using Bootstrap's "row" class. To get it to stick to the bottom of the page I set the bottom to 0 and the position to fixed. However, when I do this, combined with the width being 100%, the right side of the control container div extends all the way to the far right of the page. How do I get this bottom div to line up with the big white box above it, complete with the margins on left and right?
Here is the code for the bottom control div:
<div class="row" style="background-color: darkgray; bottom: 0; position: fixed; width: 100%;">
<div class="col-md-4">
<input type="button" class="btn" value="Add" />
</div>
<div class="col-md-4">
<input type="button" class="btn" value="Delete" />
</div>
<div class="col-md-4">
<input type="button" class="btn" value="Save" />
</div>
</div>
Basically what I'm trying to accomplish is something like the picture below but have the control div be stuck to the bottom of the page.
ok then you do it like this
remove class 'row'
change your code as follow
.
<div style="left: 0; bottom: 0; position: fixed; width: 100%;">
<div style="background-color: darkgray; width: 50%; margin: 0 auto; display: block;">
<div class="col-md-4">
<input type="button" class="btn" value="Add" />
</div>
<div class="col-md-4">
<input type="button" class="btn" value="Delete" />
</div>
<div class="col-md-4">
<input type="button" class="btn" value="Save" />
</div>
</div>
</div>
I'm trying to have a paragraph tag in between two buttons with spacing. The small issue is the weird symbol when I add the " " command. I just need to take it out, or I'd like to know if there is an alternate way in adding space.
HTML:
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small"> or </span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Suggest you to use padding (left & right) instead of space( ). Check out the preview at https://jsfiddle.net/jwe8h49z/9/
I don't see any grey marks with just your code and boostrap in this codepen. Seems like something else is going on?
Also, as #Erik Philips suggested, a better way would be to use margins.
Here's an example:
<div class="col-md-12 text-align-center" >
<button type="submit" href="../cards" class="fb_btn registerbtn" style="margin-right: 10px;">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn" style="margin-left: 10px;">REGISTER</button>
<p>to claim this coupon</p>
</div>
.fb_btn{
padding:5px;
margin-right:5px;
margin-left:5px;
}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Use CSS to add spaces between controls.
This code will work for you --
button{background:#f2901a; color:#fff; border:0; padding:15px; width:120px;}
.color-gray{padding:0 20px; position:relative; }
.color-gray::before{content:'---'; position:absolute; left:0px; top:0px;}
.color-gray::after{content:'---'; position:absolute; right:0px; top:0px;}
.text-align-center{text-align:center;}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Apply CSS Box Modeling and apply margin or padding instead of using  
<style>
button{
margin: 10px;
}
</style>
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Let's say I have a form, when user clicks I want another div (with a loading spinner) to appear on top of the form, so the form would still be visible but the loading spinner would be on top of the form:
<div id="form">
<p class="login-box-msg">Sign in to start your session</p>
<form action="javascript:void(0)" method="post" ng-controller="loginCtrl">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email" required ng-model="email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" required ng-model="password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<input type="button" class="btn btn-primary btn-block btn-flat" ng-click="signIn()" value="Sign In" />
</div>
<!-- /.col -->
</div>
</form>
I forgot my password<br>
</div>
<div id="loader" style="background: green;opacity: 0.5;filter: alpha(opacity=50); /* For IE8 and earlier */"></div>
How can I achieve this?
in your <div id="form">
put the following as first element
<div style="position:absolute; width:inherit; height:inherit;">loading...</div>
You can achieve this with position: absolute or position: fixed.
Absolute positioning will position the element according to your top, left, bottom and right values and take it out of the text flow. This will probably be your method of choice here.
Fixed positioning will do the same, except that the div is then positioned relative to the browser window and will stay in this position no matter what, so even when scrolling on the page, the div will stay fixed on this position and not scroll with the rest of the page.
You can do this by using the pseudo element :after,
make it position absolute and give it height and width of 100%
and top and right of 0.
like this:
#form {
position: relative;
}
#form:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #abc123; // put ur spinner here
z-index: 2; // make sure it is on top
}
I've created a search form using bootstrap. I've also used jquery to generate a delete search button (x) when text is input, however, I am stuck trying to get it on the same line as the search form (ideally in the box to the right).
As you can see in the second picture, when "1" is entered into the form the button is generated below the search form. I have included my code below, any help would be greatly appreciated.
<form id="PWFS">
<label for="Label">Info</label>
<button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button>
<div class="row">
<div class="col-md-8">
<div class="input-group btn-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search" id="search" placeholder="Workflow #">
<span id="searchclear" class="searchclear fa fa-times"></span>
</div>
</div>
<button id="WFFsearch" type="submit">Search</button>
</div>
</form>
</div>
<br>
CSS
.searchclear {
position: relative;
z-index: 10;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Thank you Lal, Phil and adamdc78. I just had to change the position to absolute.
I'm trying to position a clear button inside an input field, at the right before to the search icon, however it's not working; the "x" is displayed in front of the input field instead.
i use absolute positioning with right:0 and top:4px
You can see my example here: http://www.bootply.com/YUwdJ5Kvx6
A little update to get what you want:
input {
/* Avoid use typing under the clear button. */
padding-right: 30px !important;
}
.input-group-btn {
position: relative;
/* This avoid the "clear" button being hidden while
the input has focus on. */
z-index: 1000;
}
.input-group-btn a.btn {
position: absolute;
right: 38px;
top: 0px;
}
/* This avoid the bad effect when clicking the button. */
.input-group-btn a.btn:hover,
.input-group-btn a.btn:active {
box-shadow: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width: 300px;">
<div class="input-group">
<input class="form-control" placeholder="Search by ID..." type="text">
<span class="input-group-btn">
<a class="btn" style="color: rgb(204, 204, 204); text-decoration: none; " href="#clear">
<i class="glyphicon glyphicon-remove"></i>
</a>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.
I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).
I added padding-left: 30px !important to the input field to avoid user typing under the x button. To have a symmetrical space, you would need 38px, but it looks a bit much... You can change this value at your discretion to get the result you want.
Since the a tag is inside the input-btn-group with the btn class, you need something like a:hover { box-shadow: none ; } to avoid ugly box-shadow in your input when clicking on the close button.
Try this i have appended the button before and after. Comment if this is you want or not. Did i understood you correct?
<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;">
<div class="input-group double-input">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<input type="text" placeholder="Second" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div><!-- /input-group -->
</form>