Support Article

Growing size of Overlay with every Text Input when labels left

SA-30486

Summary



When user shows a section as an Overlay, its size grows with every Text Input that user adds when Label Position is set to left. 



Error Messages



No error messages


Steps to Reproduce

  1. Private edit the pxUIGallerySampleFA to contain a text input, and the pyUIGallerySkin skin to set the label position to the left for the Default Dynamic Layout format. 
  2. Open UI Gallery to the Overlay example. 
  3. Click the Standard button. Overlay has 1 text input and is about 300px wide. 
  4. Open pxUIGallerySampleFA section 
  5. Add another Text input so there are 2 text inputs. 
  6. Close and reopen the UI Gallery and test the Standard Overlay again. It is wider. 
  7. Add another text input to the section. Overlay is Wider again.


Root Cause



The width is being calculated by browser based on the textarea div which has CSS display:inline-block; width:100%

Resolution



Perform one of the following local-change solutions:

Option 1: Use a fixed width Overlay Format as shown below and set the height and width in the skin rule.



Option 2: Remove the 100% width inline style from the overlay template.

 
  1. save the pyOverlayTemplate section rule (From Rule- class) into your own application ruleset so that you can customize it (it is an available rule).  
  2. In this section open the properties for the single cell inside Layout 1 
  3. On the Presentation tab expand the “Advanced presentation options
  4. Remove the Cell inline style that is default “Width:100%;” as shown below (I have used a private checkout just for testing.





 

 

Published November 17, 2016 - Updated November 19, 2016

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.