Forum Stats

  • 3,854,203 Users
  • 2,264,340 Discussions
  • 7,905,607 Comments

Discussions

APEX 5 set custom region height

Daljit R
Daljit R Member Posts: 121 Blue Ribbon
edited Dec 26, 2017 6:46PM in APEX Discussions

Hello all,

Hopefully not a difficult one for somebody. Is there a way that the configuration set using a regions Template Options - Body Height setting can be overridden with your own value?

When the body height is set to a fixed value e.g. 640px then the class i-h640 is applied to the region body div and I can’t figure out how to supply a larger value.

I require a larger height as I want to include my own externally referenced component into the region and APEX doesn’t recognise the components height automatically resulting in part of the component being cut off.

Thanks,

Daljit

My environment details:

  • APEX 5.0.4.00.12
  • Oracle 11g (11.2.0.1), CentOS 5
  • ORDS 3 - Tomcat 7
  • Internet Explorer 11 (Windows 7)
  • Universal Theme
Tagged:

Answers

  • jwellsnh
    jwellsnh Member Posts: 1,816 Silver Trophy
    edited Dec 26, 2017 3:37PM

    Give the region in question a Static ID and then apply InLIne CSS at the page level.

    pastedImage_2.png

    Daljit R
  • fac586
    fac586 Senior Technical Architect Member Posts: 21,219 Red Diamond
    edited Dec 26, 2017 3:42PM
    Daljit R wrote:Hopefully not a difficult one for somebody. Is there a way that the configuration set using a regions Template Options - Body Height setting can be overridden with your own value?When the body height is set to a fixed value e.g. 640px then the class i-h640 is applied to the region body div and I can’t figure out how to supply a larger value.I require a larger height as I want to include my own externally referenced component into the region and APEX doesn’t recognise the components height automatically resulting in part of the component being cut off.

    More detail required:

    • Which region template is being used?
    • Why set any height at all? The default Auto setting should result in the region expanding to contain its content.
    • What is the “externally referenced component” and how is it included in the region?
  • Daljit R
    Daljit R Member Posts: 121 Blue Ribbon
    edited Dec 26, 2017 6:46PM

    Thanks both for your input.

    jwellsnh - Your suggestion does probably what you expected, unfortunately it hasn't provided me with the desired result (to display component in question in a larger window). I'll use some screenshots to show you what I'm seeing as I feel that is the most suitable way currently.

    When Template Options - Body Height = auto:

    auto.png

    When Template Options - Body Height = 640px:

    640px.png

    With inline CSS height:700px and When Template Options - Body Height = auto:

    700px.png

    With inline CSS height:700px and When Template Options - Body Height = 640px:

    700px_640.png

    For the last screenshot I had to scroll the page to capture the area of interest so ignore other differences (missing toolbar etc..), they key area relevant to this discussion is that using the inline CSS does increase the body height but component doesn't acknowledge it as useable space. The component is placed into the div t-Region-bodyWrap so I guess that is what needs to be increased.

    fac586 wrote:More detail required:Which region template is being used?Why set any height at all? The default Auto setting should result in the region expanding to contain its content.What is the “externally referenced component” and how is it included in the region?

    This region is set-up as Static Region, using the Standard template, with Use Template Defaults checked, but Header = Hidden, and of course am adjusting the Body Height. The region is a tab of a container region which has the template Tabs Container. Setting to auto doesn't have the desired outcome (ref. earlier screenshots/comments in this post).

    The external component is ONLYOFFICE - a google docs or MS office online/365 alternative. I'm just doing some simple proof of concepts integrations at the moment. I know APEX has a rich text editor region 'out of the box', that isn't suitable in this case as printed/physical (paper: A4/letter) layouts and document editing is needed including equation editing and some basic drawing tools.

    As part of the integration I actually set the region Source > Text to be <div id="ed1_placeholder"></div>. I reference the ONLYOFFICE javascript API file in the Javascript arra of page properties under File URLs, then under Execute when Page Load I have some javascript calling the API to replace the ed1_placholder with the document editor component, this places the following code into the t-Region-body div of the region:

    <iframe src="http://192.168.169.1/web-apps/apps/documenteditor/main/index.html?_dc=2017-12-07-11-13&lang=en&customer=ONLYOFFICE&frameEditorId=ed1_placeholder" width="100%" height="100%" align="top" frameborder="0" name="frameEditor" allowfullscreen="" onmousewheel=""></iframe>

    The API by default instructs the editor to occupy 100% width and height. As the screenshots show the connectivity itself is in place, I'm trying to tidy up the layout so that I can show a full A4 page without scroll bars in the editor iframe.

    Apologies for the lengthy post.

    Daljit

This discussion has been closed.