Forum Stats

  • 3,852,402 Users
  • 2,264,102 Discussions
  • 7,905,060 Comments

Discussions

Categories

Region Header - reduce height

Bernhard FW
Bernhard FW Member Posts: 169 Red Ribbon
edited Sep 9, 2019 5:22AM in APEX Discussions

As I am developing an application for iPads I have not much space in the UI.

Therefore I like to reduce the height of the REGION HEADER - let's say to half of the standard height.

In the source code and template  I can see a <h2> tag surrounding the name of the region within the header, which will control the height of the name within the region header.... (i thought)...
my idea: change this to <h4> in the template ... that will the reduce the height atleaset to some extent; 

<div class="t-Region #REGION_CSS_CLASSES#" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#> <div class="t-Region-header">  <div class="t-Region-headerItems t-Region-headerItems--title">    <span class="t-Region-headerIcon"><span class="t-Icon #ICON_CSS_CLASSES#" aria-hidden="true"></span></span>    <h4 class="t-Region-title" id="#REGION_STATIC_ID#_heading">#TITLE#</h4>  </div>  <div class="t-Region-headerItems t-Region-headerItems--buttons">#COPY##EDIT#<span class="js-maximizeButtonContainer"></span></div> </div> <div class="t-Region-bodyWrap">   <div class="t-Region-buttons t-Region-buttons--top">    <div class="t-Region-buttons-left">#PREVIOUS#</div>    <div class="t-Region-buttons-right">#NEXT#</div>   </div>   <div class="t-Region-body">     #BODY#     #SUB_REGIONS#   </div>   <div class="t-Region-buttons t-Region-buttons--bottom">    <div class="t-Region-buttons-left">#CLOSE##HELP#</div>    <div class="t-Region-buttons-right">#DELETE##CHANGE##CREATE#</div>   </div> </div></div>

but that had no affect ...

pls kindly advise

thanks

Tagged:
· Share on TwitterShare on Facebook

Answers

  • fac586
    fac586 Senior Technical Architect Member Posts: 21,204 Red Diamond
    edited Sep 7, 2019 6:32AM 
    Bernhard FW wrote:As I am developing an application for iPads I have not much space in the UI.Therefore I like to reduce the height of the REGION HEADER - let's say to half of the standard height.In the source code and template I can see a <h2> tag surrounding the name of the region within the header, which will control the height of the name within the region header.... (i thought)...
    my idea: change this to <h4> in the template ... that will the reduce the height atleaset to some extent;but that had no affect ...pls kindly advise

    My advice would be to leave things alone. Applications running on touchscreens need proportionately larger controls with more space between them because fingers are less precise pointing devices than mouse cursors. Conversely it is much easier to scroll the display in all directions on a tablet or phone than it is on a desktop, so users are less concerned about having to do so.

    If you are creating a mobile only application, then having multiple regions on a page isn't a good idea anyway. Aim to show all of the required information on a page with minimal scrolling. Use one or two regions per page, arranged so that the responsive layout can show them horizontally without scrolling in landscape view, or vertically with one scrolling gesture in portrait mode. Page titles  can then be used to give context to the entire page, meaning that region headers are probably not required at all.

    Avoid having "not much space in the UI" through careful UX design. Don't use wide, complex, or fiddly components like interactive reports/grids, trees, or shuttles. Replace these with mobile-friendly list views, reflow reports, and checkboxes. For reports, use responsive presentations like cards instead of tables.

    · Share on TwitterShare on Facebook
  • Bernhard FW
    Bernhard FW Member Posts: 169 Red Ribbon
    edited Sep 9, 2019 5:22AM

    Thanks a lot - will follow your advice !

    · Share on TwitterShare on Facebook