Styling columns to be of equal size

[Tuukka Mustonen]

After giving a thumbs up for WWB, I do have one question:

I grabbed the styles from the example project and tried customizing them, I expanded

.inputField {
    width: 80%;
}

to

.inputField {
    width: 100%;
}

in order to have input fields in columns to have equal width (the 80% rule works for 1 column or when fields don't span columns). Then I tried adding padding to .labeledField. However, adding padding/margin there doesn't do anything at least in Firefox. So I added

.beanGridTable td {
   padding-right: 20px;
}

which works, but for inline fields I get problems, because inline fields are wrapped into beanGridTable's td, so the padding gets doubled as in pictures:

http://tinypic.com/r/of7hud/5
http://tinypic.com/r/24q0kuu/5

I tried adding a negative padding to .beanInlineField but that didn't help either. As CSS does not support selecting parent elements I cannot disable .beanGridTable td padding for inline fields' special case.

I suppose I would need CSS class indicator to show those cells that DO NOT have embedded fields. Should I implement this or are there better suggestions?

Also, a bonus question if it is possible to:

• Define different amount of columns for different tabs (for same bean)
• Manually embed further content to tabs (for example, Google map showing the address location)
  

Thanks in advance,
Tuukka

[Dan Syrstad]

In pure CSS you can write a selector such as

.parentCSSClassName .childCSSClassName { .... }

which will only modify .childCSSClassName when it's nested within .parentCSSClassName. You should be able to say:

.beanGridTable .inputField { ... }

to customize input fields within a table. I think this is what you're looking for.

Beyond this, have a look at the "css" and "dynamicCss" parameters (http://code.google.com/p/wicket-web-beans/wiki/ParameterReference) to control styling more precisely.

Responses to your other questions:

• Define different amount of columns for different tabs (for same bean): Kind of a hack - Possibly define another getter on the parent bean returning the same collection, e.g., "getDetailedList()", then you can customize the properties for this table.
  
  
• Manually embed further content to tabs (for example, Google map showing the address location) - You could create your own Field and register it to map to a property returning a "Location".
  

-Dan

--
You received this message because you are subscribed to the Google Groups "Wicket Web Beans" group.
To post to this group, send email to wicket-w...@googlegroups.com.
To unsubscribe from this group, send email to wicket-web-bea...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/wicket-web-beans?hl=en.

[Tuukka Mustonen]

I totally forgot the css properties... however, I'm not sure if they are enough here:

The problem is that:
1) The whole form is wrapped into .beanGridTable
2) Each field resides in a cell of that table
3) Embedded fields reside in the very same cells
4) However for embedded fields a new .beanGridTable is created inside the cell, so is one .beanGridTable inside another
5) The styling gets applied to both

It's easy to apply styles to child classes in CSS as you stated. However, I need to actually _remove_ a style from a _parent_. So I need this case:

1) When a cell contains a plain field, apply the style to the cell
2) When a cell contains an embedded bean (another .beanGridTable), do not apply the style for the outer/container cell but do apply it for the cells in the inner/contained table

Now I could easily mark the embedded bean with special CSS class, but that doesn't allow me to remove the style from the parent :/ I suppose what I need here is an CSS indicator showing if a form/table cell contains a plain field or an embedded bean (and this should be builtin). As the dynamicCss is applied per object, not per field basis, I suppose it doesn't help in this case?

Tuukka