I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.
Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/
Related
Dropdown is hiding. I dont know what problem. If i give opacity and overflow visible it is not working. I have tried in inspect element, but it is not working.
Code for text box:-
<input class="typeahead form-control tt-input" id="search" placeholder="Location" type="text" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="search_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top;">
CSS:-
element.style {
position: relative;
vertical-align: top;
}
.form-control {
padding: 10px 22px;
border: 4px solid #938F94;
height: 47px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
}
Code for tt-menu:-(Dropdown)
element.style {
position: initial;
top: 100%;
left: 0px;
z-index: 100;
display: none;
}
.tt-menu {
width: 350px;
margin: 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
How to make it overflow visible?
use this code if you are using bootstrap dropdown.
.dropdown{
z-index:9999;
}
I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}
I'm attempting to make a pair of JQuery UI sortable divs where you move items from one vertically expanding div to another horizontally expanding div (think something like a timeline). The idea is that you can drag an item up from the holder div onto the timeline div, and as you add items the div will expand to hold them all.
I've tried a few different CSS things, ranging from using floats and inline-blocks to making the container extremely wide by default (sort of worked, but I'd rathe not have all the extra space there by default, and it's still possible to run out of space), but I can't seem to make it expand horizontally, only vertically. Here's my current code:
JS:
jQuery( ".dragto ul.connect-sortable, .dragfrom ul.connect-sortable" ).sortable({
items: "li:not(.empty)",
connectWith: ".connect-sortable",
placeholder: "ui-state-highlight",
start: function(event, ui) { ui.placeholder.html(' ') },
receive : function(event, ui ){
},
update : function(event, ui ){
}
}).disableSelection();
Sample HTML:
<div class="dragto">
<ul class="connect-sortable">
</ul>
</div>
<div class="dragfrom">
<ul class="connect-sortable">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
CSS:
ul.connect-sortable {
margin: 0;
padding: 0;
list-style: inline;
width: 100%;
min-width: 100%;
min-height: 200px;
padding: 10px;
margin: 10px;
border: 2px solid #bfb9b3;
background-color: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.dragto {
width: 100%;
overflow-x: scroll;
}
.dragto ul.connect-sortable {
height: 230px;
/* width: 10000px; */
}
ul.connect-sortable li {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
margin: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
text-align: center;
background-color: #FEFEFE;
border: 2px solid #bfb9b3;
float: left;
}
ul.connect-sortable li:hover {
border: 2px solid #5cc7ee;
background: #e5f6fb;
cursor:pointer;
}
.ui-state-highlight {
border: 2px dashed #D8D8D8 !important;
background: #F0F0F0 !important;
height: 200px;
width: 200px;
}
.ui-sortable-helper {
-webkit-box-shadow: 0px 3px 5px #888888;
-moz-box-shadow: 0px 3px 5px #888888;
box-shadow: 0px 3px 5px #888888;
}
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
Any ideas?
Fiddle
Is it possible with CSS to set the position of a div to 8px left of center?
The reason for my asking, is that JQuery Mobile sets divs to the right by about 8px, and I would like to center an element, which would require applying a left correction of 8px.
My CSS:
.sectionMap{
width: 300px;
display: block;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Any ideas?
Kinda hacky, but maybe something like this:
.sectionMap{
width: 300px;
display: block;
position:relative;
left:50%;
margin-left:-158px; /*Centered, minus 8px left*/
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
DEMO
I wrote this code which appends movie posters to a selected div with an ID.
For whatever reason, appended elements end up outside (below) the div. When I check the HTML in my debugger, the elements are clearly inside the div in question.
I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated!
Here's the entire code. The DIV used is div.movieListBox_trans in the CSS. The point of all this is to margin the grid area for the posters to the center. However, since the elements end out outside, the margin-center attributes doesn't apply.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(dis) {
$("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
for(var i=0; i<7; i++){
$("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
}
});
</script>
<style type="text/css">
div.movieListBox_trans{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background: yellow;
opacity: 0,5;
}
div.filmdiv{
float: left;
width: 350px;
height: 180px;
margin: 15px;
}
div.metadiv{
float: right;
background: #DCDCDC;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
width: 200px;
height: 180px;
border-style:solid;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.poster{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 1px;
border-color: #D3D3D3;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.posterClickableNoMargin{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 3px;
border-color: black;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="displayBoxFind" class="movieListBox_trans"></div>
</body>
Add this style to fix the problem
div.movieListBox_trans {
overflow: hidden;
}
Fixed version http://jsbin.com/OSUkupO/2/edit
Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?