Single Item CSS Grid Alignment

I often need to have a single item on a page (think a search item above a report for example). I would like this item’s label to still align to the right, but be flush with the left side of the report. Like so:

However, with the current CSS grid implementation of the Universal Theme, this type of layout is not possible in a declarative way. Depending on the screen size, you always end up with some extra space.

Here’s a little bit of CSS that I find myself using a lot. If your item is called P310_SEARCH you will want to add the _CONTAIER suffix:

It basically finds the div for the label and changes the with to whatever the grid wants (a fixed percent) to automatic. By making it automatic, the width will now be the length of the label.

Demo

Here’s the end result with the CSS

and without the extra CSS:

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

I love comments, write me a line