[SOLVED] Set style for custom control

Setting the style of the content element directly is overridden by the theme setting the properties and styles of the actual widget. In particular the margin property is translated to style positions since you cannot use margin in css with absolute positions by the underlying javascript layout engine.

Either you do it after the dom is rendered or it’s much simpler to change the theme.

You can:

1. Create a custom theme based on an existing theme. This will limit you to the base theme.
2. Create a mixin that alters only what you need to alter, this will allow you to pick any theme and keep your changes.
3. Change the theme at runtime in code.

Solution 2 is the preferred one. New Item -> Mixin theme. see below and attached. Arrays are in the standard TRBL sequence.

{
 "name": "Application",

   "appearances": {
     "datefield": {
       "inherit": "datefield",
       "components": {
         "textfield": {
           "states": {
             "default": {
               "properties": {
                "margin": [ 0, 0, 0, 2 ]
              }
            }
          }
        }
      }
    }
  }
}