Portlet UI layout


I am new to CAF and developing a portlet. I need information on how can we customize the appearance when we use different controls like static cells, property lines etc.; in fact, I’m not sure which ones to use.

Here is my thought on the UI look:

  1. An image at the top fitting a page - I used an image control for this; but struggling with the fitment.
  2. A dropdown followed by a multi-line in the same horizontal line - have used static row>>static cells(one with left and the other with right alignment) here, but these are displayed next to each other on the page.
  3. Have placed another static row below the one on point 2; but this appears just next to the one above it. Is there a way I can put some spacing between these rows.
  4. Also, I have placed control labels for dropdowns etc., but they appear behind these controls. How can I place them above a control?
  5. Have used some buttons that I want below a multi-line, but they appear in a random manner. How to fix this?

I wanted to know if there’s a way to place whatever wherever on the page, and if yes, then how, and how can I use different controls like panels, static rows, property groups, lines etc.

Please help me here.

Thanks a lot.