Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 238
  • Last Modified:

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;

.Popup {
    background-color: #FFF;
    border: 1px solid #000;
    width: 75%;
    height: 80%;
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Open in new window


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;
}

Open in new window


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);
}

Open in new window


my tabs are initiated in the jquery document.ready using $("#tabs").tabs();

what am i missing?
screenshot.png
0
flynny
Asked:
flynny
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
Can you post more of your page code - difficult to see from what you have posted what the problem is - could be a number of things.

If you have a link to the page that would be great - otherwise if you can post the html here.
0
 
flynnyAuthor Commented:
yes no problem

link to page is as follows;

fun4all.partyepos.com/public

move the draggable div, select logo settings -> change logo button, and the popup will be shown
0
 
Julian HansenCommented:
The reason is that the tabs container is pushing the content down.

You need to give your <ul> tabs container a height and your <div> tabs a height that sum to 100%;
So for example I gave your <ul> a height of 20% and the <div> tabs themselves the following
element.style {
  display: block;
  height: 80%;
  overflow-y: scroll;
}

Open in new window

You might need to play around with it but the reason is that your container for the tabs is height: 100% and the tabs themselves take up some space so the <div> tabs are extending too far.
0
 
flynnyAuthor Commented:
really sorry for the delay on getting back to you on this
0
 
Julian HansenCommented:
No problem - thanks for the points
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now