Our blazing fast Grid component built with pure JavaScript


Post by natalija »

Hello!

I have created navigation fields with WidgetHelper. Is removing a border from date fields and a combo field with built-in attributes possible?
Is changing the combo fields' label color with built-in attributes possible?

Please take a look at the attached image. I want to remove outer black borders around input fields and make the User label more visible.

WidgetHelper.append([
          {
            type: 'buttongroup',
            cls: 'day-navigation',
            items: [
              {
                type:         'datefield',
                id:           'period_start_datefield_for_view',
                cls:          'date-container start-date',
                ref:          'selectedStartDate',
                format:       '${date_format}',
                value:        '${period_start}',
                weekStartDay: 1,
              },
              {
                type:         'datefield',
                id:           'period_stop_datefield_for_view',
                cls:          'date-container end-date',
                ref:          'selectedEndDate',
                format:       '${date_format}',
                value:        '${period_stop}',
                weekStartDay: 1,
                },
              },
              {
                type:         'combo',
                items:        ${doctors},
                cls:          'date-container doctor-list',
                ref:          'doctorList',
                label:        'User',
                style: {
                    margin: '0 0.5em 0 0.5em',
                },
                placeholder:  'All',
                value:       '${user_id_to_view}',
                width:       '25em',
              },
              {
                type:    'button',
                ref:     'selectButton',
                cls:     'btn select-button b-raised',
                text:    'Select',
              },
              {
                type:    'button',
                ref:     'excelExportBtn1',
                cls:     'btn excel-export no-text',
                icon:    'fa fa-file-excel',
              },
            ],
          }
      ],
        {
          insertFirst: document.querySelector('.navigation-buttons') || document.body,
        }
      );
Attachments
navigation_fields.png
navigation_fields.png (4.64 KiB) Viewed 69 times

Post by marcio »

Hey natalija,

Thanks for reaching out.

You can achieve those changes by using CSS. Is there a reason why you're not using some CSS rules to change borders and label size?

Best regards,
Márcio


Post by natalija »

I was just checking if there are any ready-made styles, like the ones you got for buttons. Thanks for the answer!


Post by mats »

We're currently rebuilding all our styling to use native CSS variables, so once this is ready (aiming Q3 2025), then you'll be able to easily re-style any widgets we offer.


Post Reply