2

I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.

My actual code (I cannot paste here my code for security reasons) has:

  • The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.

  • The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when the pop up height is less.

The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.

If i did not apply jquery ui select menu, it´s working as expected.

Please find the below images for reference.

  • 1.When having enoug popup size. enter image description here

  • 2.when popup size is less ,select is hiding. enter image description here

  • 3.What i am expecting. enter image description here

Please suggest me what i can do to solve this.

Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31
Jayababu
  • 1,641
  • 1
  • 14
  • 30
  • Please add a piece of code with your DOM structure and CSS rules and maybe we will be able to help you in a better way, not just "suggesting" which one could be your problem – Alejandro Teixeira Muñoz Jun 09 '15 at 13:08

1 Answers1

0

Add CSS property overflow-y:visible on the main popup div:

This will make the inner content that is outside the main div top/bottom bounds to be rendered. 

popupSelector {
   overflow-y: visible;
}

Here is the documentation about overflow-y

Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31
  • Thanks for the reply.I am aware that we can do like that.But i want to acheive the same using z-index,not via increasing width or using overflow. – Jayababu Jun 09 '15 at 12:55
  • as they said: "Tere's no way in CSS to make a child of an overflow: hidden element show it's contents outside the parent borders, you must change the hierarchy" – Alejandro Teixeira Muñoz Jun 09 '15 at 13:00
  • oh..Ok But somehow the basic select box with out any styles doing the Job correctly. – Jayababu Jun 09 '15 at 13:02
  • I could not able to share the code due to some security.When i replace html dropdown with jquery-ui dropdown only issue is arising.I have tried a lot of ways to overcome.But its not happening without hierarchy change.So as of now i have removed jquey-ui stylings. – Jayababu Jun 10 '15 at 13:24
  • I think you will need to make an overflow-y or a hierarchy change, to take the select out of the parent div...(i´d do it with the overflow)... – Alejandro Teixeira Muñoz Jun 10 '15 at 13:29
  • anyway, styling a select is VERY HARD, check this before trying: http://stackoverflow.com/questions/30750006/why-is-it-so-hard-to-style-select-and-option-elements/30750206#30750206 – Alejandro Teixeira Muñoz Jun 10 '15 at 13:30
  • overflow is not needed in my case,i can even extend the height of my pop up div to the extent i require,But i dont want to do that,as it will look ugly. i will check the link you mentioned. Thank you for all the support :) – Jayababu Jun 10 '15 at 13:33
  • maybe creating a transparent div.,... like... `div{popup, transparendiv}` ? – Alejandro Teixeira Muñoz Jun 10 '15 at 13:47