Styling Issues on React Schedule repeating inputs with Fluent UI 2

[Thomas Pentenrieder]

Using the React Schedule with Fluent UI 2 Theme the layout is off for the repeater fields as you can see in this screenshot taken from the official demo below:

https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/editor-custom-field

Unfortuantely the layout is really terrible with nested tables which makes it hard to fix and should be taken care of in the controls IMO.

[Ashokkumar Karuppasamy]

Hi Thomas Pentenrieder,

We consider your reported query with " Misaligned Repeater Fields in React Schedule with Fluent 2 Them" as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly  patch release, which is expected to be rolled out by the February 11, 2025. You can track the status of the fix at the following link:

Feedback link: Misaligned Repeater Fields in React Schedule with Fluent 2 Theme in React | Feedback Portal

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Ashok

[Ashokkumar Karuppasamy]

Hi Thomas Pentenrieder,

We are glad to announce that our weekly release (V28.2.11) has been rolled out successfully. The fix for the issue has been included in our weekly release(28.2.11). Upgrade to the latest version to resolve the issue.

[index.html]

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/28.2.11/fluent2.css" rel="stylesheet">

    <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Release notes: https://ej2.syncfusion.com/javascript/documentation/release-notes/28.2.11?type=all#numeric-textbox

Feedback: Misaligned Repeater Fields in React Schedule with Fluent 2 Theme in React | Feedback Portal

Root Cause: The higher height value (32px) has been added to the NumericTextBox component for the floatLabelType set to auto and always in the Fluent2 theme. To resolve this issue, the height value of the NumericTextBox component for the floatLabelType set to "auto" and "always" in the Fluent2 theme to be reduced (30px).

Sample: https://stackblitz.com/edit/react-ddnz3cgn-pfud5jva?file=index.html

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you require any further assistance.

Regards,
Ashok

[Thomas Pentenrieder]

I'm importing the fluent styles from npm, is it seems those were not updated:

https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/editor-custom-field

[Ashokkumar Karuppasamy]

Hi Thomas Pentenrieder,

Updating to the latest package version of the scheduler resolves the issues you mentioned.





Regards,
Ashok