cancel
Showing results for 
Search instead for 
Did you mean: 

Set cell width in Matrix Layout

Former Member
0 Kudos

Hi

I am using Matrix Layout so that I can align my columns in all rows.

From what I understand this is Similar to table with <tr> and <td> and each UI element I create (using Insert Child) inside a container creates a cell (<td></td>) and the property MatrixHeadData moves it into a new row.

I can use colSpan to span across multiple cells.

The problem I am having is in controlling the width of each cell. It appears to be stretching equal width depending on the number of UI elements.

I want to be able to control the width in the cells ( not the UI element width) so that I can control the layout. For example I have a text box and I add a button next to it, it is not placed at the exact location i want. It stretches depending on the size of my container width.

I have the set the container StretchHorizontal property to false. That did not help much.

I see a width column in Layout when I place each element but it wont let me set any value for that property. The value disappears. I am able to change the width of a button or text. I want to change Cell width.

I know with JSP we have the control of layout using HTML view but unfortunately we dont have that view here and having hard time controling the layout.

Any help and tips are greatly appreciated.

Thanks

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

What do you mean with "I see a width column in Layout when I place each element but it wont let me set any value for that property. The value disappears."?

The "cells" in a MatrixLayout are represented by the Matrix(Head)Data objects assigned to the contained elements. Thus setting the MatrixData.width property should do what you need.

Armin

Former Member
0 Kudos

Armin,

Thanks for your response. I think MatrixData.Width is what I could not set. It will let me enter but it disappears when I move out. I think I was not clear.

In MatrixDataLayout, I have a data entry form with for example 6 fields, 3 fields in each row. I want to control the spacing between each field.

Customer: CustTextBox Profit Center: PCTextbBox

The above will create 4 cells as there are 4 UI elements. I want to control the space between the elements so that the UI layout looks good.

when I select a UI element in Layout- Outline and View the properties of the element. There are Element Properties, which has a Width, the allows me to change the width of text box. This works.

The Properties window of UI Element also has a Layout Data (MatrixData) section that has a width. This is what I thought will let me control the Width of cell. I am not able to set this width.

Also Can we add multiple elements in one cell.

Thanks

Former Member
0 Kudos

To add multiple elements in one cell just add a TransparentContainer into the cell and add your elements into that container.

As far as controlling the space between elements - I've struggled with this as well. What helped me the most was when I found the streatchedHorizontally property of the MatrixLayout - when I set this to false I had more control over the spacing and my elements weren't spread out on the screen. (oops, just realized you said you already tried this! sorry!)

Message was edited by: Jennifer

Jennifer A. Jacobs

Former Member
0 Kudos

Ravi,

If a UI element in one of the cells is larger than another UI element in that column, MatrixLayout automatically adjusts the space between the columns.

If you need more space between the columns, try playing with width of the entire MatrixLayout (like a container) with strechedHorizontally set to True.

This layout also behaves like Grid layout w.r.t cells in one row, so you can set colSpan for the individual field too.

Hope I helped you.

Regards,

Rajit

Former Member
0 Kudos

If you cannot set property values in the view designer, this seems to be a bug in your IDE. Open an OSS message on BC-DWB-WD-JAV.

Armin

Former Member
0 Kudos

Armin,

It seems to be the case with my IDE too, for the said field. My IDE is 7.0.10.

Regards,

Rajit

Former Member
0 Kudos

Thanks Armin, Jennier and Rajit for your quick responses.

Armin, I will try to open a OSS. I have NWDS Version: 7.0.09

Build id: 200608262203. I will check if there are any newer versions/patches that may have fixed the bug.

Jennifer. I like the transparent container idea to add multiple elements in a single column. I am used to having complete control over the layout with other web technologies. Web Dynpro makes the development very easy but being new, still trying to figure out the layout limitations.

Is there a performance impact if I use lot of transparent contaniers.

From what I understand, the colors of the UI elements/containers can only be changed using themes and not inside web dynpro. Is that right? or is there any other way to control the layout branding.

Thanks

Former Member
0 Kudos

There are some things you can do without using themes, but nothing too drastic.

For instance, I have a MatrixLayout where I have multiple rows of Label/Field combinations. In order to make it easier to read I changed the cellBackgroundDesign of each field in every other row to use fill1 so that it has a darker blue background.

Also, there's not a lot of options for the look of a Label UI element, but there's more options for TextViews - just something else to keep in mind.

I agree it's quite an adjustment to the limitations of Web Dynpro - even though it's a very powerful tool and they have the limitations for a reason, it's hard when you go from developing JSPs where you have complete control to Web Dynpro! It's been a lot of trial and error for me

Former Member
0 Kudos

Thanks for the tips.

I am in that trial and error phase. :-). I like the other powerful features of web dynpro and MVC architecture.

Answers (1)

Answers (1)

former_member751941
Active Contributor
0 Kudos

Hi Ravi,

From the outline select the cell colname [TableColumn-GroupedColumn] and set the width property value in terms of pixel [like 200px] instead of %.

To see the difference set diff width property value [like value 20px, 30px, and 150px]

for each cells in the table. Instead of taking “Matrix Layout” you can take Grid Layout.

<a href="https://www.sdn.sap.comhttp://www.sdn.sap.comhttp://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/webdynpro/wd%20java/wd%20tutorials/developing%20web%20dynpro%20user%20interfaces.pdf">Developing Web Dynpro User Interfaces SAP NetWeaver</a>

Regards,

Mithu