Code:
First div is containing image and image is overlapping on the contents of second div.
<div>
<img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" /> alex is desperately looking for college and there are many more like here
</div>
<div id="progressbar">
<label id="ProgressText">
alex is still unhappy, step <label id="RemainingSteps">2</label> to go
</label>
<div id="progressFilled">
</div>
</div>
I want that image should not overlap the contents of second div. how can i do this?
You need to set overflow to hidden.
CSS
.wrap{
overflow: hidden;
}
HTML
<div class="wrap">
<img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" />
alex is desperately looking for college and there are many more like here
</div>
<div id="progressbar">
<label id="ProgressText">
alex is still unhappy, step <label id="RemainingSteps">2</label> to go
</label>
<div id="progressFilled">
</div>
</div>
Use the following code.
<div class="clearfix">
<img src="happy.jpg" style="height:50px;width:50px;border-radius:50%;float:left" /> alex is desperately looking for college and there are many more like here
</div>
<div id="progressbar">
<label id="ProgressText">
alex is still unhappy, step <label id="RemainingSteps">2</label> to go
</label>
<div id="progressFilled">
</div>
</div>
Add this to CSS
.clearfix:after {
content: "";
display: table;
clear: both;
}
Related
I'm using bootstrap-sass to layout a some div elements in a vertical stack. But, I am having an issue when the viewport is above the md size the div elements overflow and produce a vertical scrollbar.
Demo https://nyc3.digitaloceanspaces.com/bingo-assets/index.html
Here's my grid.scss file:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
.row {
#include make-row();
}
#content {
#include container-fixed;
}
#promo-header {
#include make-sm-column(12);
}
#subscribe {
#include make-sm-column(12);
}
#video {
#include make-sm-column(12);
}
#factoid {
#include make-sm-column(12);
}
And below is the HTML:
<div id="content">
<div class="row">
<div id="promo-header">
<img width="100%" src="/images/promo.jpg">
</div>
<div id="subscribe">
<h2>Simply enter your details for a chance to win!</h2>
<form name="subscribe">
<div>
<label>Firstname</label>
<input type="text" name="firstname" />
</div>
<div>
<label>Surname</label>
<input type="text" name="surname" />
</div>
<div>
<label>Email</label>
<input type="text" name="email" />
</div>
<div>
<label>Telephone</label>
<input type="text" name="telephone" />
</div>
<div>
<label>Postcode</label>
<input type="text" name="postcode" />
</div>
<div>
<label>Have you seen this product on TV?</label>
<select name="question">
<option value>Please Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</div>
<button class="btn">Get Your Coupon</button>
<small>Please note: Only one coupon available per person and only one email address allowed per person. Coupon valid 02.10.17 - 31.03.18. Redeemable by UK residents 18+ only in participating stores only.</small>
</form>
</div>
<div id="video">
<div id="video-container">
<iframe src="https://www.youtube.com/embed/ZZa7Kgo0apA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="description">
<h2>Video Title</h2>
<p>Do you want to cook amazing meals?</p>
</div>
</div>
<div id="factoid">
<h2>Celebrity dietician Lucy Jones and Princes are working together to show families how they can eat well with canned fish.</h2>
<p>Did you know our fillers are:</p>
<ul>
<li>High in protein</li>
<li>Low in saturated fat</li>
<li>A quick and easy lunch</li>
</ul>
Learn More
</div>
</div>
</div>
I put a red border around each div. Here is what it looks like on a small or medium viewport:
The solution was to replace:
#include container-fixed;
with
#extend .container;
container-fixed appears to be a fluid container as can be seen from the fluid-container declaration:
.container-fluid {
#include container-fixed;
}
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
Is there a way to select an element that isn't child? I'm not't really sure how to word this or explain it. Hopefully the code will speak for itself:
Fiddle: http://jsfiddle.net/kBhgV/3/
HTML:
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
CSS:
[title=section-2] {
display: none;
}
input:checked ~ [title=section-2] {
display: block;
}
Is there a way that when you check the box, it will show section-2 without making section-2 a child of section 1?
change your code from
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
to
<input type="checkbox" id="item-1"/>
<div title="section-1">
<div>
<label for="item-1">Item 1</label>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
then your css should work fine. You can set the visiblity of your checkbox to hidden and position it absolutely somewhere off the page.
my site uses a similar technique for the navigation so you can see how it works by inspecting the code.
http://www.aktof.ca/
changed your fiddle
http://jsfiddle.net/kBhgV/4/
I've created extremely simple form that contains 2 inputs and 2 buttons.
When I would like my form to take 6 spans width and be centered.
Below is my code:
<div class="container-fluid padded">
<div class="row">
<div class="container">
<div class="row">
<!--filtry-->
<div class="span6 offset3 padded" style="border: 1px solid black;">
<form action="#" method="get" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Data od</label>
<div class="controls">
<input type="text" id="dataOd" class="input-xlarge" />
</div>
</div>
<div class="control-group">
<label class="control-label">Data do</label>
<div class="controls">
<input type="text" id="dataDo" class="input-xlarge" />
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>
<a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
My form in full size browser looks like this:
but after resizing it I get this result:
How should I change my code to get those input 100% width on every resolution?
Is there any simple way or do I must tweak whole bootstrap?
I've tried adding span* classes to inputs but without any luck.
There are similar questions on SO (https://stackoverflow.com/a/11193864/965722), but answer involves JavaScript and I would like to avoid that.
Here is jsfiddle with my code: http://jsfiddle.net/Misiu/HdSEn/
You need to increase the width of the span. Set span8 instead of span6.
Demo : jsfiddle.net/HdSEn/3
OR
If you want display full width of the box on page, add span12 instead of span6
jsfiddle.net/HdSEn/5/
Updated
<div class="span7 offset3 padded well">
The problem is, form is greater than span7. Like form width> span7,6,5,4.... So you need to set width for input box.
Demo: http://jsfiddle.net/HdSEn/18
Hope this solves your issue:
JSFiddle Demo
CSS:
input[type="text"] {
min-height:30px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.