Question

I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the ‘Show All’ button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/

Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.

I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?

I’ve tried style=”” in the ‘Region Attributes’ of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.

The region display selector has rounded corners when using Chrome, but not in Internet Explorer.

Please could i have some help with my problem.

• Oracle Version: Oracle version 10.2.0.4.0
• Full APEX version: Application Express 4.1.1.00.23
• Browser(s) and version(s) used: Internet Explorer 7 & 8
• Theme: Simple Red
• Template(s): The standard templates with the Simple Red theme.
• Region/item type(s): 3 HTML pages each holding text box fields.

Thank you.

See example below of region display selector:

Answer 1

Example of region selector html from Simple Red theme

<div class="apex-rds-container">
   <ul class="apex-rds" id="485041125812774413_RDS">
      <li class="apex-rds-first">
         <a href="#SHOW_ALL"><span>Show All</span></a>
      </li>
      <li class="apex-rds-selected">
         <a href="#R166676032406817143"><span>datepicker</span></a>
      </li>
      <li class="apex-rds-last">
         <a href="#R485010513691770957"><span>region 2</span></a>
      </li>
   </ul>
</div>

inspect style tab for
DIV

.apex-rds-container {
    height: 40px;
    margin: 0 0 9px;
}

UL

ul.apex-rds {
    background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
    border: 1px solid #999999;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 1px 2px 2px #AAAAAA;
    float: left;
    list-style-type: none;
    margin: 0;
}

LI

ul.apex-rds li {
    float: left;
    list-style: none outside none;
}

A

ul.apex-rds li.apex-rds-first a {
    border-left: 0 solid #000000;
}

ul.apex-rds li a {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #999999;
    display: block;
    height: 16px;
    padding: 1px 10px 0;
    text-decoration: none;
}

a {
    color: #660000;
}

SPAN

ul.apex-rds li span {
    color: #000000;
    font-size: 11px;
}

So, this shows that a background image is used for the UL. This image’s dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don’t work in IE.

All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,

/* -------------------- Region Display Selector -------------------- */

You can find everything you need there.
Don’t mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!