I have several Razor pages in an MVC4 project that follow a general layout that can be viewed here. Each page will have a fieldset, and most will have either a Save or Next or whatever kind of button. What I'd really like and can't figure out is how to get the Save/Next/Whatever button to always position in the lower-right corner of the fieldset. I've attempted solutions from a couple of other questions, but sadly none seem to apply to this situation. Is this even possible?
Here's the stylesheet.
Put the fieldset in position:relative and put the button in Position:Aboslute with bottom:0 and right:0, this should work for one button, to place the others, do the same thing but change the right value to the combine width of the other buttons.
Example:
.lower-right-button{
position:absolute;
bottom: 0;
right: 0;
}
<fieldset style="position: relative">
<input type="submit" value="Save" class="lower-right-button">
<input type="submit" value="New" class="lower-right-button" style="right: 110 px">
</fieldset>
EDIT: The bottom and right attributes align the bottom and right edge of the element with the bottom and right edge of its container. In that case, bottom: 0 and right: 0 will place it at 0 pixel from the bottom-right corner, you might want to put something else like bottom: 5px right:5px
EDIT AGAIN: Fixed, initial proposition didn't work, here's a JSFiddle
EDIT ONCE AGAIN: With Romias proposition, put the button in a div and position the div at bottom right instead, here's the updated JSFiddle
Relative first, then absolute.
It's quite simple really. The first step is to set the parent container's position property to relative as follows:
<fieldset style="position: relative;">
...
</fieldset>
This will set the boundaries for your next element to be positioned, only this time, using absolute positioning.
<div style="position: absolute; bottom: 0; right: 0;">
<input type="submit" value="Save" />
</div>
Putting the two together:
<fieldset style="position: relative;">
...
<div style="position: absolute; bottom: 0; right: 0;">
<input type="submit" value="Save" />
</div>
</fieldset>
After this, you can add some margin to this div tag (or pull away from the bottom right corner a little) to add some padding, throw in some styles, etc.
use following CSS for buttons (please adjust margins)
position: relative;
margin-top: 45%;
margin-left: 90%;
Related
I centered my form for laptop, with this .css code:
form{
position: absolute;
top: 40%;
left: 20%;
}
And here is the result:
this
But now, when I whatch it on my smartphone, I get this:
this
Which is not centered.
How would you center a form for every devices in Bootstrap/CSS ?
Add this class next to the row class: "justify-content-center". And delete "left: 20%" Like this:
<div class="container">
<form>
<div class="row justify-content-center">
<input type="text">
<input type="text">
<input type="text">
</div>
</form>
</div>
However, it won't success with absolute position. You may change that with relative position. Or check these: How to center absolutely positioned element in div? or How to center a "position: absolute" element
Add (left and right) margin: auto.
form{
margin: auto;
}
If you need top/bottom margin, set it like margin: 5px auto
This will center the form using your current setup:
form {
position: absolute;
top: 40%;
left: 0;
right: 0;
margin: auto;
}
But I would personally go with Atreidex's solution using existing Bootstrap classes (well, I personally wouldn't use Bootstrap, but if I already were using it, I would make use of its available classes rather than re-inventing the wheel - isn't that why you're using Bootstrap?).
I'm having trouble with keeping a layer both fixed and centered at the same time. I can't apply margin: auto as my layer doesn't have any width value, it's a fulid thing.
I found this one: https://stackoverflow.com/a/1777282/2114455
It's a great solution to center the layer, but how do I keep this centered layer fixed (I mean, no move when scrolling)
I put them all in a position: fixed; div but this did not work. Any solution?
Maybe I'm not understanding your question, but if you change the position of the outer div from the solution you linked to "fixed" it should work.
<div style="position: fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
(fiddle of this in action: http://jsfiddle.net/Rykus0/TQw2j/)
I'd like to use the box-sizing: border-box CSS property to split a form into a left and right half:
<form class=container>
<fieldset class=left>
<label>Description</label>
<textarea name=description></textarea>
</fieldset>
<fieldset class=right>
<label>Name</label>
<input type=text name=name />
</fieldset>
</form>
In order to make this work, I need to float both <fieldset> elements to the left:
.left, .right {
width: 50%;
margin-left: 0px;
marign-right: 0px;
box-sizing: border-box;
float: left;
}
The problem is of course that since the <fieldset>'s are floated, they are no longer in-flow, and the <form> element gets a height of 0 (unless i add a clearfix or something). If I remove the float property and change their display to inline-block, they're back in flow, but they no longer line-up next to eachother.
Is there some way to use border-box here without needing to add a clearfix element (or :after pseudo element)?
For reference, here's a fiddle that uses floats, and here's a fiddle that uses inline-block.
That's quite a common problem.
Adding an overflow value on the container, will have the browser to recalculate the container's dimensions despite it have no not-floated elements.
.container { overflow: hidden; }
Before and After
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
My markup looks like this:
<div id="content">
<img src="some_content.jpg">
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
The mark up for the form is generated by a CMS, so I cannot change it.
The content div has a fixed width and height so that I can center it vertically and horizontally in the page. Currently all children within content is set to display: inline-block and then aligned horizontally and vertically within the content div.
I have aligned the forgot your password link like this:
And here is the css for the link in question:
#forgot-password{
float: right;
margin: 0; /* reset some stuff inherited from parent */
padding: 0; /* reset some stuff inherited from parent */
margin-right: 171px;
margin-top: -20px;
}
Here are some relevant css:
#content{
position:absolute;
width: 650px;
left:50%;
top:50%;
height:242px;
margin-top:-126px;
margin-left: -325px;
text-align: center;
}
#content > *{
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
margin-left: 20px;
margin-right: 20px;
}
That all works well. However, in some cases, for example, if an error has occurred with the form submission, then an error message will be appended to the from in the <form> element by the backend.
In such a case, I want the link to be aligned like so:
The problem with my css as it stands is that the forgot password link is aligned from the bottom of its parent (content). I need to align it relative to the button.
My initial idea was that I will align the forgotyourpassword div straight under the form. Thus, if the size of the form changes when the error messages are added, the forgotyourpassword link will be pushed downwards.
I can then set margin-top to a negative amount of pixels which should then push my forgotyourpassword div back up x pixels, which will then align the element with the submit button no matter how tall the form has become.
I am finding that this is not the case:
In firefox 10, the forgotyourpassword div does not seem to get "pushed up" by a the amount of pixels I have defined once it overlaps with the content area of the form.
In IE9, the forgotyourpassword appears above the form!
Is there a way to do this with just CSS and having it work with IE7 and above and firefox?
#content form{
position: absolute;
top: 80px;
right: 0px;
}
#forgot-password{
height:80px;
}
If you try something like this, you take the form out of the flow, and the link will appear above it without any fine-tuning. Once the top value for #content form and the height value for #forgot-password match, you should be safe as houses.
In some cases, you could have issues with clearing the absolutely positioned div, but you say you're setting the height for #content, so it shouldn't be a problem here.
Since I am not able to change the markup for the form, I am not able to insert the div for forgotyourpassword as a child of the form.
So, I added a wrapper div:
<div id="content">
<img src="some_content.jpg">
<div id="wrapper>
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
</div>
Then is simply a matter of adjusting the margins for the forgotyourpassword div:
#forgotyourpassword{
float: left;
margin-top: 10px;
}
This is the best solution I can come up with now as the wrapper div does not add any sematic value to the document, but I don't think there would be an easy solution otherwise (until we can use math and get dimensions of elements in CSS).