flynny
asked on
JQuery CSS 100% inside Modal Window
Hi All,
This is probably a really simple solution i'm overlooking here.
I have a modal popup which has the following css;
Inside is a container div with the css simply set to 100%.
inside the container div I have some jquery tab controls which I want the content to be 100% height of the div otherwise display vertical scrollbars. However its setting height:100% is just overflowing outside the modal popup?
my .ui-tabs css is as follows;
and gives the attached screenshot. However as you can see the Tab is just wrapping to the content and if the content height is larger than the modal popup the overflow is not hidden or scrollbars displayed? (the divs inside the tab content have the following css;
my tabs are initiated in the jquery document.ready using $("#tabs").tabs();
what am i missing?
screenshot.png
This is probably a really simple solution i'm overlooking here.
I have a modal popup which has the following css;
.Popup {
background-color: #FFF;
border: 1px solid #000;
width: 75%;
height: 80%;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Inside is a container div with the css simply set to 100%.
inside the container div I have some jquery tab controls which I want the content to be 100% height of the div otherwise display vertical scrollbars. However its setting height:100% is just overflowing outside the modal popup?
my .ui-tabs css is as follows;
.ui-tabs {
position: relative;
padding: 0.2em;
height: 100%;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0px 1px 1px;
padding: 1em 1.4em;
background: none repeat scroll 0% 0% transparent;
border-left: 1px solid #2191C0;
border-right: 1px solid #2191C0;
border-bottom: 1px solid #2191C0;
}
and gives the attached screenshot. However as you can see the Tab is just wrapping to the content and if the content height is larger than the modal popup the overflow is not hidden or scrollbars displayed? (the divs inside the tab content have the following css;
.PopupImageLibraryContainer {
overflow-y: scroll;
padding: 3px;
border: 1px solid rgba(0, 0, 0, 0.6);
}
my tabs are initiated in the jquery document.ready using $("#tabs").tabs();
what am i missing?
screenshot.png
ASKER
yes no problem
link to page is as follows;
fun4all.partyepos.com/publ ic
move the draggable div, select logo settings -> change logo button, and the popup will be shown
link to page is as follows;
fun4all.partyepos.com/publ
move the draggable div, select logo settings -> change logo button, and the popup will be shown
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
really sorry for the delay on getting back to you on this
No problem - thanks for the points
If you have a link to the page that would be great - otherwise if you can post the html here.