Date field align (centering)

Support
#1

Hi,

I want center or right align date field. Try to ada style in main scss file text-align: center. But this didn’t work.

How can I center dateField component?

In grid, table we have align=CENTER but in form I can’t find any solution or documentation.

#3

Hello!

To make a custom layout in the Form component, you should place DateField in some component container, for instance:

<form id="form" dataContainer="someDc">
    <column width="350px">
        <textField id="nameField" property="name"/>
         ...
        <hbox caption="Date">
            <dateField id="dateField"
                       align="MIDDLE_RIGHT"
                       dataContainer="someDc"
                       property="date"/>
        </hbox>
    </column>
</form>

Pay attention if your component is in the component container, you should set dataContainer for field and caption for container manually.

#5

Hi!

This align a whole field. But I want to center date field value in field component.

image

#6

In this case, you should extend application theme and write a CSS selector. See Creating a Custom Theme.

For instance, if you need to center a certain DateField you can do the following:

  1. Add stylename attribute to dateField:
    <dateField id="dateField"
           stylename="my-stylename"
           property="date"/>
  2. Write a CSS selector:
@import "../helium/helium";

@mixin ext-helium {
  @include helium;

  .my-stylename .jmix-datefield > input {
    text-align: center;
  }
}
#7

Great!

Its working perfectly. Thanks.