Scrollbar Not appearing for Kemdo React Window

1 Answer 46 Views
Miscellaneous
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Mansi asked on 14 Jan 2022, 09:47 AM

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?

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 18 Jan 2022, 06:01 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 18 Jan 2022, 02:58 PM

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
Telerik team
commented on 19 Jan 2022, 05:44 AM

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.

Tags
Miscellaneous
Asked by
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or