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 :)
Related
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
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;
}
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.