I am trying to make an iOS app using HTML and CSS. For responsive design i am using twitter bootstrap. Now what i need is to make a header (at the top of the screen), a form, in the middle of the screen. That form should be scrollable only if user wants to add more details (it would be dynamic, if user enters the required details only, then it should not be scrollable). I am experiencing a problem where I am not able to place the form in the center of the screen. I want it to be vertically as well as horizontally centered.
When i change margin-top, i am able to make it in the middle, but it isnt responsive and gets displaced in ipad resolution. Please help, i am not a designer and new to twitter bootstrap.
Here the fiddle: http://jsfiddle.net/TLX7Z/1/
Here is my code:
HTML
<body class='pagination-centered'>
<div class='navbar-inner headercontainer'>
<center><div id="hello"><a href='index.html'><h1>Hello there</h1></a></div></center>
</div>
<div class='mainbodycontainer row-fluid pagination-centered'>
<div class='sampleapp'>
<div id='title1'>Here, Enter the details</div><br>
<input placeholder = "first feild" class="address span10" type="text">
<div id= "div1"><input class="address span10" id="friend1" type="text" placeholder = "feild 2"></div>
<div id='wrapper'><div id='button2' class="btn btn-danger"><i class="icon-white icon-minus"></i> Remove</div>
<div id='button' class="btn btn-success"><i class="icon-white icon-plus"></i> add</div></div>
<div <div id="submit-button" class="btn btn-success ">Go</button>
<label><div id ="result"></div></label>
</div>
</body>
CSS
#import url('http://twitter.github.com/bootstrap/2.3.2/assets/css/bootstrap.css');
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
width: 100%;
height: 100%;
padding 0;
}
.headercontainer
{
width: 100%;
}
.sampleapp
{
margin-top: 20%;
}
use this and just replace width & height with values:
this will put your sample app in center of the page :
.sampleapp{
width: width;
height: height;
position: fixed;
top: 50%;
left: 50%;
margin-left: -width/2;
margin-top: -height/2;
}
Fiddle
Related
I cannot figure out why my container (main-container) background is not stretching with the content inside. It looks like the container background is stuck on initial view height. When I scroll pass the initial view height, the rest of it is white.
Here is the css
.main-container {
margin: 0;
padding: 0;
font-family: 'montserrat';
height: fit-content;
}
.main {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: greenyellow;
border-radius: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
<div class="main-container">
<div class="main">
<h1>Signup</h1>
<form method="POST">
<div class="txt-field">
<input type="text" required>
<span></span>
<label>First Name</label>
</div>
<h1>Upload Image</h1>
<button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
<input type="submit" value="Signup">
</form>
</div>
</div>
This is what it looks like initially.
This is what it looks like when I scroll down
The reason is that you have position: absolute on your .main class - any elements positioned absolutely will be taken out of the regular document flow and will have no effect on the layout of their parent(s).
It looks like you are using absolute position to try and center the .main element. Have you considered using a flexbox on .main-container instead? Using a flexbox with justify-content: center and align-items: center is an easy way to center an element inside its parent while keeping the regular document flow.
I have a blank page with a form and I am trying to resize it and then centre it in the middle of the page, I have tried using margin: auto, divs, containers,rows, etc, and it just is not working?
.search-form {
width: 800px;
height: 50px;
margin: auto;
}
.search-input {
width: 100%;
height: 100%;
padding-left: 15px;
}
<form class='search-form' action="{% url 'search-results' %}" method='get'>
<input class='search-input' name='q' type='text' placeholder='Enter keywords here'>
</form>
I have it in the center of the page now, but I still need it to resize when I resize the browser etc?
UPDATE - CSS -
'''
.search-form {
max-width: 800px;
width: 100%;
height: 50px;
margin: auto;
}
.search-input {
width: 100%;
height: 100%;
padding-left: 15px;
}
'''
It is now working now. Thanks.
Assuming you are using bootstrap, you first need to change col-sm-1 to just col-sm.
Bootstrap runs on a grid system and you can specify how many columns you want in very different ways. They support up to 12 columns where col-sm-1 will take up one column space, and col-sm-6 will take up 6 of the 12 (half the page). If you remove the number it will size to the maximum size that it can be along with its sibling elements. You probably want to also set your form to be a relative width which will allow it to grow and shrink with the page. There are different ways to do this. Some people use max-width, and others use percentages. Lot's of ways to do what you are tryin to accomplish. Both examples are in the code snippet below. Ignore the link tag... that's just so that the example works.
form {
width: 30%;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Search Form -->
<div class='sb'>
<div class="row">
<div class="col-sm">
<form class='search-form' action="{% url 'search-results' %}" method='get'>
<input class='search-input' name='q' type='text' placeholder='Enter keywords here'>
</form>
</div>
</div>
</div>
I've tried all the examples I found. I have a div which is positioned in the middle in front of an image. But when the screen resizes the div doesn't stay as it should. Can somebody please tell me what am I doing wrong? My code looks like this:
My HTML:
<section class="SliderOuter">
<img src="images/cover.png" alt="">
<div class="container" style="text-align:center;">
<div class="tags1">
<img src="images/ESCO_logo_big.png" alt="">
<h3 style="color:#ffff">Leading company in the fiel of energy efficiency</h3>
<br>
<h4 style="color:#ffff">Be the first to know about ESCO updates and announcements:</h4>
<form action="" method="post" role="form">
<input class="form-control" type="text" id="" name="" placeholder="your#email.com">
<br>
<input type="submit" value="Subscribe" class="btn btn-large btn btn-danger" />
</form>
</div>
</div>
</section>
My CSS:
.tags1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Please help!
Thank you in advance!
If I've understood this correctly your problem is not with the .tags div but with its parents .container and .SliderOuter
.container needs some positioning applied to it so that it sits within .SliderOuter and yet over the first image.
.Slider in turn needs positioning set on it so that .container can have its height relative to that.
Your CSS eventually should look something like this...
.SliderOuter {
position: relative;
}
.container {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tags1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
I've thrown together a Fiddle here http://jsfiddle.net/2owysubj/2/
For the fiddle I took the liberty of tidying up the markup a little (you should try to avoid using inline styles and <br> for styling purposes and I've used some dummy images to demonstrate, but the general principal is all there.
Another thing to think about might be to substitute the first image with a background image so you can remove the need to have .container absolutely positioned.
You could also look into using Flexbox for centring elements, but for what you need right now positioning works perfectly well.
I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?
<div id="discover" class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
<img id="discoveryour" src="img/x.png" class="img-responsive">
</div>
</div>
<div class="row-fluid">
<div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form>
</div>
</div>
</div>
Css:
.withimg {
width: 100%;
overflow:hidden;
padding: 0px;
margin: 0px;
}
#discover{
position: relative;
}
#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;
}
Ah, the good old "how to overlay stuff on top of a responsive image -- responsively" question.
A little tricky, but not too bad. The tricky bit is how to make the stuff's vertical position responsive when the image size changes.
Fear not, here's one simple way to do this:
HTML:
<div class="img-wrapper">
<img class="img-responsive"
src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
CSS:
.img-wrapper {
position: relative;
}
.img-responsive {
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 50%;
}
The img-overlay:before pseudo-class handles the vertical positioning job by pushing the img-overlay div down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50% attribute if you want the button higher or lower).
jsfiddle
To make the button size responsive to window width, you can create a new class for your button. Let's call it btn-responsive (this replaces btn-md in the example above). Then use #media queries to adjust the btn-responsive attributes for different window widths. Something like this:
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
and so forth for other screen widths.
In case you're wondering how to do this with bootstrap 5 (like me), there are new classes that do the trick. For instance, I did this to put a button floating right top over the image (I also use font-awesome but you can use any text/icon you like for the button):
<div class="card">
<img class="card-img-top img-thumbnail" src="someimage.png" alt="alt text">
<div class="card-img-overlay">
<a href="#" class="btn btn-outline-warning btn-sm float-end"
data-bs-toggle="popover" data-bs-content="Edit image" data-bs-trigger="hover focus">
<i class="far fa-edit"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Some title</h5>
<p class="card-text">Some text</p>
</div>
</div>
Check out the official bootstrap documentation for more info.
I have to ask if there's a possibility to replace form tag into another DIV? Then you can just use position: absolute for button. I created fiddle to show how https://jsfiddle.net/1x1pjwk7/
I am building a chat application using Bootstrap as a base and fluid-container because it needs to be a 100% height and width app but it seems that Bootstrap does not like this so I've ended up with some custom CSS to sort it.
The idea is that there are two panels shown on the page, the chat panel and the users panel and the panel-body of both should overflow automatically inside itself.
The problem is that now I am also using panel-footer and it's created this strange problem, see here in the screenshot.
Here is the CSS:
.panel {
margin-bottom: 0;
height: 100vh;
max-height: 100vh;
position: relative;
}
.panel-body {
overflow: auto;
position: absolute;
top: 30px;
bottom: 30px;
left: 0;
right: 0;
}
.panel-footer {
position: absolute;
bottom: 0;
}
By the way, I am complete beginner in custom CSS so if I am making it more confusing then it needs to be, and it can all be simplified, please also tell me that! I appreciate it :)
.panel-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
Is there any reason why positioning the panels body and footer abolute? When giving the body a height the footer automatically sticks to the bottom
A similar issue, except that my footer ends up affixing itself to the bottom of the PAGE, not the panel in question. My HTML (everything stripped down to bare bones for testing while I put this together) and minimal CSS (again, everything stripped down to barest while I get this working) are below.
<div class="panel panel-default" style="height:100%;border:1px solid pink;"> <!-- border so I can see what's up -->
<div class="panel-heading">
<h4>Select or create case</h4>
</div>
<div class="panel-body" id="caseSelector">
<!-- empty during testing so as not to muddy the test-->
</div>
<div class="panel-footer case-panel-footer" style="border:1px solid cyan;"> <!-- border so I can see what's up -->
<div class="col-sm-6">
<button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button>
</div>
<div class="col-sm-6 text-right">
<button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button>
</div>
<div class="clearfix"></div>
</div>
.case-panel-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
I simply can not get this panel-footer to sit at the bottom of the panel's containment area, even though the pink border clearly shows the panel is taking up the whole region available to it in the container.