Learn how to a build a cloud-first strategyRegister Now


How do I make this Flex Layout

Posted on 2007-10-09
Medium Priority
Last Modified: 2008-01-09
Hi, I am trying to make the following FLEX layout.


How would I do this, note: I am not familiar with flex at all, I prefer the design layout to the code layout. Thanks.

Question by:tariqjamal
  • 3
  • 2
LVL 10

Expert Comment

ID: 20042594
You'd probably be best to start with a Canvas and use the constraint values to keep the panel on the left and the tab navigator sized correctly.  Then it's a matter of playing with the interior items.  It might be easier of you attempted the layout and let us know if there were specific difficulties you were running into.  Give it a go, and I'd love to help out from there.

Author Comment

ID: 20049158
Ok, here is my problem, I've uploaded a pic to show you.

I have changed the layout a little bit, but my question is this. These are the changes I'm having trouble with

I need to know how to:

make the buttons on the left are aligned to the bottom of the screen.

and the height of the right datagrid to be the full height of the panel minus 20 px on the top (space for buttons).

The link to my screen shot is

Thanks. Also, if you know anything about adding an image within a datagrid let me know. Thanks.
LVL 10

Expert Comment

ID: 20049754
I think the key here is going to be percentages and spacers.  Put a spacer at the top on the right that's 20px tall, then set the datagrid height to 100% (assuming the panel is set to vertical).  If it's set to absolute, then just set the constraints to 0 on all sides except the top, set that to 20px.  For the buttons on the left I'd just put a spacer between the list at the top and the buttons.  Or make your list height 100%.

Author Comment

ID: 20052127
Both worked like a charm.

Only 1 question left, how can I add a little image into a datagrid?

By the way, I really appreciate your help, I wish there was a way to give extra points.

LVL 10

Accepted Solution

Savong earned 2000 total points
ID: 20052671
Not a problem, take a look at itemRenderers.  Basically it allows you to create a little component (in this case an image) and specify you want to use that to render a column.  A perfect example is here:

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question