I cant get the two object to the same height.
The table should be on the left side and the button at center but now the button stays under the table but I dont know why.
Here is a jsfiddle for it.
Code:
<div class="container">
<div class="text-center">
<div>
<table class="table col-sm-3">
<thead></thead>
<tbody id="ranking"><tr id="xOJzQ-ik9pNq3OKbAAAA"><td>1.</td><td style="width:10px" class="align-middle"><div style="background-color:green;width: 10px; height: 10px;"></div></td><td>Name</td><td>0 Pkt.</td></tr><tr id="JaH1T-7XNkBqa2cnAAAB"><td>2.</td><td style="width:10px" class="align-middle"><div style="background-color:RosyBrown;width: 10px; height: 10px;"></div></td><td>dfsdf</td><td>0 Pkt.</td></tr><tr id="jwEfjfA6COOTeG0ZAAAC"><td>3.</td><td style="width:10px" class="align-middle"><div style="background-color:gold;width: 10px; height: 10px;"></div></td><td>ffff</td><td>0 Pkt.</td></tr></tbody>
</table>
</div>
<div>
<input type="button" class="btn" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
</div>
</div>
Edit: Both sould be at the top, not vertical center.
Try this
<div class="container">
<div class="text-center row">
<div class="col-sm-3">
...
</div>
<div class="col-sm-6">
<input type="button" class="btn m-auto" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
</div>
</div>
Have a look at JSFiddle
Related
I am trying to add a div on top of another div as an overlay which will move out of the screen with the click of the image. I am trying to get the image on the right corner, but it disappears if I set it to float: right.
<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
<div style="position: relative; top: 43px !important;
left: 0 !important; z-index: 5000!important;
background-color: #FFDAB9;width: 16%;">
<div style="width:88%;background-color: red; " id="goToDiv">
<div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
<label>Section</label>
<select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
<option>Section 1</option>
<option>Section 2</option>
</select>
</div>
<div class="col-md-12" style="background-color:slateblue;padding:6px;">
<label>Page No.</label>
<input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
</div>
<input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
</div>
<span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
<img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
</span>
</div>
</div>
add display: block and margin:auto to image
or you can wrap the image in a div and use text-right class if you are using bootstrap
<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
<div style="position: relative; top: 43px !important;
left: 0 !important; z-index: 5000!important;
background-color: #FFDAB9;width: 16%;">
<div style="width:88%;background-color: red; " id="goToDiv">
<div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
<label>Section</label>
<select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
<option>Section 1</option>
<option>Section 2</option>
</select>
</div>
<div class="col-md-12" style="background-color:slateblue;padding:6px;">
<label>Page No.</label>
<input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
</div>
<input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
</div>
<span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
<img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
</span>
</div>
</div>
I have a row of divs:
row of divs
When I decrease the window size they move down and stack on top of one another
divs stacked on top of one another
another example of the divs stacked
Instead of having them move down one by one as the window size gets smaller I want them to all move down together to the next row like so:
how I would like the divs to display
How would I go about doing this using divs? or if there is another method (like flex boxes) please let me know. Thanks!
Here is all the relevant code:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
you need to consider a few points
you need to make div responsive in small screen devices by adding col-12 before col-md-6.
if you're using bootstrap then learn it well and you don't need to use inner css.
replace this:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
with this:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Use #media and when size of screen is reduced to specific size then apply width: % to class .pricing-boxes like used in below snippet.
Use padding and margins according to need
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
#media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
}
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
I am looking for a way to make this search bar with its inputs and buttons responsive. However i got stuck with Bootstrap properties and when I shrink the window everything stacks very bad and I just can't figure out how to apply some better classes and props. Here's the codepen link: http://codepen.io/anon/pen/WGKOmB
Appreciate all advices
This is my html:
.row {
background-color: blue;
padding: 40px 30px;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
div.form-group.checkbox {
width: 207px;
background-color: white;
padding: 5px 10px;
}
select.form-control {
width: 173px;
}
input.form-control.choice-input {
/*.choice input input*/
width: 360px;
height: 38px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<!-- row -->
<div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
<p>Lorem ipsum</p>
<div class="form-inline">
<div class="form-group checkbox">
<span><input type="checkbox" value="" checked></span>
<label>Lorem</label>
<span><input type="checkbox" value=""></span>
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control">
<option value="one">Lorem ipsum</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control choice-input" type="text" placeholder="Placeholder text">
</div>
</div>
<!-- end form-inline -->
</div>
<div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">
<p class="pull-right">Lorem ipsum</p>
<div class="btn-group">
<button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</body>
Word from the wise (not me), never use inline styling. Always put everything in CSS. Also, you set a specific height for both the blue box and the light green box. Therefore, even when the browser is narrower and would be in col-sm-* and col-xs-* territory, you still have a set height. You should give a class name, for example form-height and then in CSS write something like the following:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
#media (min-width:768px) {
.form-height {
height: 74px;
}
}
What this would do is say that when the browser is narrower than 768px, i.e. when it is considered col-xs-* by bootstrap, it should have a certain height. When it is larger it will have a different height.
However, an ever better solution is to never even use the height property. The reason you are doing this is probably because you want a certain padding. Therefore, you can write the following CSS for the class:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}
Try this code
<div class="container">
<form class="form-inline" style="padding: 20px 0;">
<div class="row">
<div class="col-sm-8 col-md-9">
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
</div>
<div class="form-group">
<select class="form-control" id="sel1">
<option>Option 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Placeholder">
</div>
</div>
<div class="col-sm-4 col-md-3">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
Demo here : https://jsfiddle.net/adb0br5e/1/
Code:
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; ">
<h1 style="text-align:center">Handsets</h1>
<table>
some table content
</table>
<div class="footerButtons" style="display: block;">
<div style="float: left;">
<input type="button"/>
</div>
<div style="float: left; margin-left: 207px;">
<input type="button"/> <input type="button"/>
</div>
</div>
</div>
I need to put div with class "footerButtons" to bottom of the main div. How can I do it?
I have add position:relative to your main div and position:absolute; bottom:10px to your div with class footerButtons to make it always near the bottom like this
Hope this help!
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; position:relative">
<h1 style="text-align:center">Handsets</h1>
<table>some table content</table>
<div class="footerButtons" style="display: block; position:absolute; bottom:10px">
<div style="float: left;">
<input type="button" />
</div>
<div style="float: left; margin-left: 207px;">
<input type="button" />
<input type="button" />
</div>
</div>
I have 2 DIVs. Something like below:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
</div>
And then css I am using is given below:
.leftcolumn { width: auto; border: 1px solid red; float: left}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
Given below a screenshot for the issue I'm facing:
change css to:
.leftcolumn { width: auto; border: 1px solid red; margin-right: 204px;}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
and replace right and left in html:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
</div>
SEE FIDDLE
Instead of using a float for the left column, why not set the right margin to 200px (or 210px if you want some spacing);
.leftcolumn { margin-right: 210px; border: 1px solid red}
This will allow the right column to float into place within the margin.
You will also need to reverse the order of the divs in your html. You want the right column to come before the left. This will give you the fluid layout you want regardless of the width of "myForm".