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>
Related
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
}
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;
I have a small box placed at the bottom of the page. I am trying to place a form right above a div but the form keeps jumping into the bootstrap div.
this is the html attempt
EDITTED:
I also want the row across the form to have a background color as thesame with the breadcrumbs but it is not showing
<div style="padding:1px; background-color: #F2F2F2;">
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Group"/>
</form>
</div>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
This is the css controlling the form
form.rightiest {float:right; margin-top:0px; margin-bottom:7px;}
with the above, the form keeps overlapping into the div. Please how can I place the form right above the div.
You need to clear your floats.
.breadcrumb {
clear: both;
}
Clear the float.
form.rightiest {float:right;
margin-top:0px;
margin-bottom:7px;}
.breadcrumb {
clear: both;
}
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Chat"/>
</form>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
I am trying to place a form on top of a Responsive Image, and I want to get the form to also be responsive and resize in relation to the image
Currently the image is responsive but I cannot get the form to be stick in one place on the image and resize in its same position
Is that possible?
Current Code: http://www.codeply.com/go/FFgsRfictx
The following is only correspond to your form section of the page you have provided.
I have removed the image element and used the resource link as the background-image of the form element. The form fields are wrapped with bootstrap classes.
a min-height has been set on the form element to prevent too much distortion of your background image.
Html:
<!--- bootstrap style sheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- form section -->
<section id="contact class" class="container content-section text-center">
<h1 class="brand-heading">Contact</h1>
<div class="container-fluid">
<div class="row">
<!---
under the grid system, one row has can have 12 columns
we'll use 3 columns on each side for spacing,
6 columns for the form.
the form is done the bootstrap way, less the validation.
you need to add in hte missing fields yourself.
--->
<div class="col-md-3"></div>
<div class="col-md-6">
<form id="responsiveForm" action="">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email"/>
</div>
<div class="form-group">
<label for="occasion">Occasion:</label>
<input type="text" class="form-control" id="occasion" name="occasion"/>
</div>
<div class="form-group">
<input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
Css:
#responsiveForm{
background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png");
background-size: cover;
background-size: 100% 100%;
min-height: 650px;
padding: 80px;
padding-top: 120px;
}
see it in Codepen
Edit: Just a bit of thought on image. if you want to use a background for your form. you should do up the form first, and find out the size of that form and shape up your image to that proportion.
Try like this:
.formOuterContainer {
position: relative;
}
.formInnerContainer {
position: absolute;
left: 72px;
right: 72px;
top: 80px;
bottom: 84px;
display: flex;
align-items: center;
justify-content: center;
}
I have a picture and a form side-by-side but I'm not being able to achieve the desired effect. This is what it initially looks like:
Which is cool, but the picture is way to big. The picture contained can vary, so a fixed width and height is not an option, because it would deform the image. I would like to give it a height property and let it adjust the width accordingly. This is what I get if I do that:
I don't understand why the image is aligning to the bottom... The chrome metrics show nothing in that space. No padding, no margin, nothing. I cannot use negative margins because resizing the browser window causes the layout to respond and the image is thrown out of the window. This is what it looks like with a margin-top of -270px (this is exactly what I want).
But if I resize this is what happens.
Here's an HTML snippet. Please tell me if you need more code:
<div class="well second-step">
<div>
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
Edit:
I created a bootply, and I just added code until the issue replicated. I hope it's enough. Here it is: http://bootply.com/76022
You might consider this:
First step: using a div with a width and height:
<div class="image"></div>
Than apply CSS
.div {
width: 500px;
height: 300px;
}
Step two: Wrap the image in it as:
<div class="image"><img src="~/folder/file.png" alt="photo: /></div>
Try to apply the css
.image img {
width: 100%;
heighti: 100%;
}
This CSS will make it get the height and width according to the div. The div has 500px width so the width will never be more than that.
Third step:
Now to make sure it stays at the top left use this:
.image img {
position: absolute;
top: 0px;
left: 0px;
}
The third step means that the image should have 0 margin from left and top.
Try using absolute positioning to put it at the top of the containing div, like so:
<div class="well second-step">
<div id="img-form-container">
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
and
img-form-container {
position: relative;
};
img-polaroid {
position: absolute;
top:0px; //this can be changed to give it margin
};