Scrollbar Not appearing for Kemdo React Window

[Mansi]

Hi,

I am using a Kendo React Window in the following way:

import React, {useContext, useEffect, useState} from 'react'
import { Window } from '@progress/kendo-react-dialogs';

const IncidentSummary = (props) => {

      const TitleComponent = (props) => {
        return <div style={{
          fontSize: "large",
          fontWeight: "bold",
          marginLeft: "2vw",
        }}>
          {props.title}
            </div>;
      };

    const close = () =>{
      return <div></div>
    }

    return (
        <div>
                    <Window className='is-window' title={<TitleComponent title={"Summary"}/>} initialLeft={70} initialHeight={"28vh"} initialWidth={"90vw"} initialTop={430} style={{boxShadow:'3px 3px 11px 0 #b6b7b9', border:"2px double black", backgroundColor:"rgb(252,252,252)"}}  closeButton={close} draggable={false}>
                      <span>Content</span>
                    </Window>
        </div>
    )
}

export default IncidentSummary

 

With following styling:

.is-window .k-window-titlebar {
    background: black;
    border: 1.5px solid black;
    color: white;
    width:auto;
    padding-bottom: 0.2% !important;
    padding-top: 0.2% !important;
    height: 3.5vh !important;
  }

 

I observe that following things are working fine in my local, but are causing problems after build and deployment:

1. The Scrollbar doesn't appear even when the content inside the window has more height than the window max-height after build and deployment

2. The Title Summary is not coming up to be vertically center aligned even though it is aligned properly in local.

 

What could be the reason for these issues and how could I resolve them?

 

[Stefan]

Hello,

Thank you for the details.

When there are differences between development and production build this is usually caused by a CSS issue. For example, in the production built some styles are either not included or loaded in a different order.

What we can suggest is to inspect the component in the development and then in production to see if there are extra styles applied or some missing ones that are causing this.

Regards,
Stefan
Progress Telerik

[Mansi]

Hi Stefan,

I inspected the components in different environments, styles are similar only.

Is there some other way to freeze the title bar of window, and make the content scrollable when height exceeds the window max-height?

Regards,

Mansi

[Stefan]

Hello, Mansi,

Both of these are available by default. If there is an issue in production this means that there is something that is interfering with the default behavior.

If sharing a link a send the production build with runnable steps is possible I will be happy to inspect it and see what could be causing this.