Our powerful JS Calendar component


Post by jinc »

Hello!

We are implementing the Bryntum Calendar and noticed that combo multiselect field height is not consistent on the event editor. For instance when the field has:

  • no selected field values: the height increases
  • values selected: the height decreases

Based on our investigation, it looks like when there are no field values selected, the b-empty class is added to the widget field. Concurrently, when there are values selected the b-empty class is removing thus removing the extra height.

Calendar configuration code:

    
createCalendar(host) { try { // Instantiate component with minimal config this.calId = host.create('Calendar', { date: new Date(2020, 9, 12), features: { eventEdit: { editorConfig: { items: { code: { type: 'combo', multiSelect: true, label: 'Language', items: [ 'BASIC', 'COBOL', 'FORTRAN', 'DBL', 'SQL', 'C/C++', 'Java', 'Javascript', ], }, }, }, }, }, modes: { list: { range: 'month', }, }, }); } catch (e) { this.error = e.message; } }
Attachments
Screen Recording 2022-10-20 at 11.32.57 AM.mov
(6.11 MiB) Downloaded 39 times

Post by alex.l »

Hi jinc,

Looks weird! What theme did you use? I don't see this styling in our examples. Maybe some CSS was overwritten or not loaded?

All the best,
Alex


Post by jinc »

Hi Alex.l,

Not quite sure what you mean by theme as we use the style from Bryntum and Salesforce. I have double checked our overrides and we do not override the b-empty class nor do we add additional margin/padding to combobox field on the calendar widget.


Post by Animal »

So when you inspect the DOM, what is causing the unexpected appearance?


Post by jinc »

When the multiselect combobox does not have any value selected, the b-empty class is applied on the div tag which implements extra padding on the input element. However, if that b-empty class is removed then those extra padding styles are removed from the input element.

Attachments
Screen Recording 2022-11-04 at 10.28.44 AM.mov
(24.09 MiB) Downloaded 32 times

Post by Animal »

That styling is not our styling. This is how that looks in an unmodified environment:

Screenshot 2022-11-04 at 20.20.36.png
Screenshot 2022-11-04 at 20.20.36.png (1006.03 KiB) Viewed 377 times

Post Reply