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>
Related
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 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
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'm interested in having a textbox take up 100% width of the remaining space but without dropping the text "name" or the button to the next line:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<span>Name:</span>
<span><input type="textbox" style="width:100%" /></span>
<span><input type="button" value="Search" /></span>
</div>
http://jsfiddle.net/GP2nA/1/
How can I prevent the text and button from dropping to the next line?
Tested in IE7/8, Firefox, Chrome, Opera.
Live Demo
Live Demo (minus extra wrapper div)
CSS:
#search {
padding: 20px; background-color: #c0c0c0;
overflow: auto
}
#search div {
position: relative
}
.name {
float: left
}
.input {
position: absolute;
top: 0; right: 70px; left:55px;
}
.submit {
float: right
}
HTML:
<div id="search">
<div>
<span class="name">Name:</span>
<span class="input"><input type="input" style="width:100%" /></span>
<span class="submit"><input type="button" value="Search" /></span>
</div>
</div>
(You should have a form and a label tag in there)
UPDATED: http://jsfiddle.net/QaWMN/2/
Works in: ie7, ie8, ff, chrome
If you need ie6 read this: http://www.alistapart.com/articles/conflictingabsolutepositions/
html:
<div style="padding: 20px; background-color: #c0c0c0; position: relative;">
<span class="desc">Name:</span>
<div class="full">
<input type="textbox" class="tb" /></div>
<input type="button" value="Search" class="button" />
</div>
css:
span {position: absolute;}
.full {position: absolute; left: 60px; right: 100px; top: 8px;}
.desc {left: 10px; top: 8px; width: 100px;}
.tb {width: 100%; display: block;}
.button {right: 10px; width: 80px; top: 8px; position: absolute}
You could use something like the following:
<div style="padding: 20px; background-color: #c0c0c0">
<span style="width:10%;">Name:</span>
<span><input type="textbox" style="width:80%" /></span>
<span><input style="width:10%;" type="button" value="Search" /></span>
</div>
Where we simply give all elements (label, input and button) a percentage of the width to eat. Note that you will need to examine your form elements and adjust the 10% of labels to compensate for that of your widest label, and alter the 80% width of the input field accordingly too.
Also, as commented by another, extract your styles and place them in CSS classes as opposed to writing them inline.
It doesn't really quite work that way in css without fancy JavaScript. However, you CAN get the same look to happen with a slight reworking:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">
<span>Name:</span>
<span><input type="button" value="Search" /></span>
</div>
<div style="width: 90%; float:left;"</div>
<span><input type="textbox" style="width:100%" /></span>
</div>
<div style="clear:both;"></div>
</div>
Or easier:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">Name:</div>
<input type="textbox" style="width:80% float:left;" />
<input type="button" value="Search" style="width: 10%; float:left;" />
</div>
<div style="display: table; width: 100%">
<div style="display: table-row; padding: 20px; background-color: #c0c0c0">
<span style="display: table-cell;">Name:</span>
<input type="textbox" style="display: table-cell; width:100%" />
<span style="display: table-cell;">
<input type="button" value="Search" />
</span>
</div>
</div>
See updated fiddle.
Note: The advantage of using this method is that you won't have to set a width on the label or the button.