CY2 already did a couple of Fluid projects. Still, one of the questions I often get is: How can we layout/style/brand the Fluid pages according our own wishes. In the three day Technical Fluid training course, I spend some time going over the concepts of styling. Believe me, there is a lot to tell about styling and layout! Today I want to start with a primer of Fluid layout techniques.

Let us create a very simple fluid page  based on the PSL_APPS_CONTENT template. I dropped some fields on it. Actually it resembles a very simple Timesheet page. This is what it looks like out of the box. So let us do some layout tricks.
Screen Shot 2016-02-11 at 12.29.12 PM

First of all you want to have all the elements the same width to get a nice organized layout.
One way to accomplish this is by using psc_control-widthxxem and pc_control-heightxxem style attributes.  Place it on each element in the Free Form Style on the Fluid tab. You can replace xx with a random number up to 100 for width and up to 20 for height. (e.g.: psc_control-width20em). Especially for the Description we want to use the psc_control-height10em to make it a little bigger in height. For the other elements on the page I used psc_control-height2em.

Underneath the result, it looks much cleaner already…

Layout the elements

 

Next up is to re-locate the labels a bit. I like them above the elements to save some space on smaller devices. We can use the psc_label-top style.
Notice when you apply this style to the elements, the whole page will move to the left. (We will correct this in the next step)

After applying this style, the result look like this:

Labels on top

Note: When you are visiting from a smaller device, you can use the form factor override edit boxes to style the elements a bit according the limited space of these smaller devices. I use psc_control-width15em for the smaller and medium devices. This is what my Fluid tab of one of the element looks like thus far.

FormFactorOverride

Now let’s center our page. Therefore we must create a groupbox around our page. This acts as a container for our layout. Also make sure the Groupbox Type is Layout Only. (This suppresses the text above the group box).

Groupbox

On the Fluid tab, we give it some random styles. Since we have chosen to apply a different style on smaller devices we also need to take this into account when we center the page. In my example I attached the cy2_timesheet20 on the Default Style and cy2_timesheet15 on the Form Factor Override. Notice that these styles don’t exists yet, we have to create them. This is what the Fluid tab on my surrounding group box looks like:

GroupBox Styles

To make the cy2_timesheet20 and cy2_timesheet15 classes we need to create a new Style Sheet branding object (people tools > Portal > Branding >  Branding Objects).  Give it a proper name (e.g.: CY2_TIMESHEET_CSS) and add the following contents:

/* tablets, desktops */
.cy2_timesheet20{
 width:21em;
 margin:auto;
 }
/*Phones */
.cy2_timesheet15{
 width:16em;
 margin:auto;
 }

To actually Load your stylesheet, use the pageActivate peopleCode and add the line: AddStyleSheet (StyleSheet.CY2_TIMESHEET_CSS);

When you load your page on a Phone you will see the elements are somewhat smaller (15em). When loading on a medium or large device the elements will have a width of 20em.

Iphone 6 screenshotdesktop_screenshot

Next time we write something about using placeholders. Especially in dropdownboxes (which is not an out-of-the-box thing in Application Designer). Stay tuned!

 

Share on social media
Showing 6 comments
  • Avatar
    Alex

    Hello Stefan,

    Thanks for the valuable tip. I tried changing the height and width of a comments text box (not long). I could see the changed width and height of the field on my fluid page. However, the text position is starting in the middle of the box and it’s not automatically wrapping inside the window.

    Am I missing any other setting here?

    • Avatar
      Stefan

      Hi Alex,

      Somehow your comment visited my spam box. hopefully not too late.

      Did you already resolve this? maybe you can share a screenshot, so I can really see what you are looking at and trying to achieve. You can send it to my e-mail adres directly if you want. ([email protected])

      Thanks!

  • Avatar
    Saurav Tiwari

    Hi Stefan,

    Good Day.
    Is there any way I can change the GroupBox style to any other using the default fluid stylesheet?

  • Avatar
    Stefan

    Hi Saurav,

    Thanks for your question. Now I am not sure what you mean with change the Groupbox Do you mean if there are delivered styles doing the same as mentioned in this post.

    If so, the answer is yes.

    You might want to checkout the ps_box_vertical_center style. which vertical aligns all items within a groupbox. you put this style on the outer groupbox. then you can use psc_control-width21em or psc_control-width16em to control the width of each individual element. You put this on the elements itself.

    Hope this is what you were aiming for.. otherwise let me know.

  • Avatar
    Karthikeyan

    Hi Stefan,

    We are converting classic to fluid. In that classic page, we had a secondary page. We have created new fluid page , cloned that secondary page and saved it as sub page. Inserted that sub page into the newly created fluid page.

    Fields in that newly created sub pages are in center.
    We have tried to add groupbox for those 8 fields and it did not work . We tried with pac float left and other styles. Nothing worked out.

    We need to move all the fields in center to left. What should we do here?

  • Avatar
    Ravi Teja

    Stefan

    Can you please write something on how to control Hyperlinks and checkboxes in a fluid page. I am trying to align them with the rest of the edit boxes but no luck. Any example or article on this is really helpful.

    Thanks
    Ravi

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Preference Center

Necessary

Advertising

Analytics

Other