formTitle padding issue

[Developer12145]

Hi Isomorphic,

please see this builtinds sample:

SmartClient Version: v12.0p_2018-10-18/PowerEdition Deployment (built 2018-10-18)

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.types.TitleOrientation;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.DateItem;
import com.smartgwt.client.widgets.layout.VStack;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {

    private DynamicForm boundForm;

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        VStack vStack = new VStack();
        vStack.setWidth("70%");
        vStack.setMembersMargin(20);

        boundForm = new DynamicForm();

        DateItem dI = new DateItem();
        dI.setTitle("Google");
        dI.setTitleStyle("customFormTitle");
        boundForm.setTitleOrientation(TitleOrientation.TOP);
        boundForm.setItems(dI);

        vStack.addMember(boundForm);

        vStack.draw();
    }

}

.customFormTitle{
  color: black;
  font-family: Arial, Verdana, sans-serif;
  font-size: 18px;
  padding-bottom: 3px;
}

I want to have more space between the formTitle and the formCells of this FormItem. So I added a titleStyle to achieve padding. Please see Picture 1, there you can see, that the padding overlays the formCell instead of freeing space between title and cell. I also tried "setCellPadding" on the dynamic form, but I think it applies to the whole cell, including title and cell of the FormItem. Do I miss something here?

Picture 1:


Thanks in advance & Kind Regards

[Isomorphic]

We see the problem here and are looking at how best to solve it.
In the meantime a quick workaround would be to inject some custom HTML into the titlePrefix and titleSuffix for the form.
If you modify your code to call:

boundForm.setTitlePrefix("<span class='customFormTitle' style='display:inline-block;'>");
boundForm.setTitleSuffix(":</span>");

and get rid of the explicit titleStyle on the dateItem you should see the expected formatting show up.
We are looking at how best to solve this at the framework level and get rid of the need for this hack

Regards
Isomorphic Software

[Isomorphic]

We've now made a framework change to address this issue. If you try the next nightly build, dated Nov 9 or above (12.0 or 12.1 branch), the above workaround should no longer be required

Regards
Isomorphic Software