minHeight property doesn't seem to be working

[Ernesto Yoon]

Hello,

I'm trying to apply the minHeight property to the Dialog component and it's not working. I set the width and height properties to show dialog as a box in the first render. It's also using the enableResize proerty.

When I check the styles in the browser's inspector I can see width and height accordingly, but no minHeight:

element.style {

1. max-height: 710px;
2. width: 500px;
3. height: 500px;
4. left: 0px;
5. top: 0px;
6. position: relative;
7. z-index:
   1001;

So, is this a bug?

Regards,

Ernesto

[Revanth Krishnan]

Hi Ernesto, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I'm trying to apply the ‘minHeight’ property to the Dialog component and it's not working. I set the width and height properties to show dialog as a box in the first render. It's also using the ‘enableResize’ property. When I check the styles in the browser's inspector I can see width and height accordingly, but no ‘minHeight’”. 

 

We tried to reproduce the issue by setting the property ‘width’, ‘height’, and ‘minHeight‘ alone with ‘enableResize’  property, but we couldn’t reproduce the issue from our end, the ‘minHeight’ styles are applied to the dialog element. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/angular-y88grk-ilyuqm?file=app.component.ts 

 

Screenshot: 

 

 

Can you please share us with more following details, 

• The code snippet of the dialog rendered in the application.
• The exact package version of the dialog component used in the application.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Ernesto Yoon]

Thank you Revanth,

I saved the stackblitz sample with some modifications and I was able to reproduce the issue and I have a better idea of when it happens.

The first thing I try in my project was to update the popups component, I was using 18.1.46, and updated to the latest, the problem was still there, minHeight was not responding. Also drag was enabled.

So I checked again your provided sample and notice this, properties like width and height set on the component like:

[height]="250"

    [minHeight]="150"

    [width]="250"

they work as expected, but not the minHeight, it's ignored. But if minHeight is set as

[minHeight]="minHeight"

Binded to a minHeight var, then it works.

Can you confirm this?

By the way, it would be nice to have the possibility of setting the minWidht too.

Regards,

Ernesto

[Indrajith Srinivasan]

Hi Ernesto, 

 

Good day to you, 

 

We have validated your reported queries 

 

Query 1: “They work as expected, but not the minHeight, it's ignored” 

 

We are able to reproduce the reported issue, from our end. We have considered the reported issue “Setting the dialog minHeight property as number is not working properly” as a bug from our end. We will include the fix for the reported issue, with our May 11th patch release. We appreciate your patience until then. 

      

You can track the status of the reported issue from the below feedback link: https://www.syncfusion.com/feedback/24789/ 

 

Until then we suggest you to bind the minHeight property in dialog, with its corresponding value and unit to resolve the reported issue. Check the below shared code blocks and sample for reference. 

 

Code blocks: 

 

 

<ejs-dialog #Dialog minHeight="400px" /> 

 

 

Sample: https://stackblitz.com/edit/angular-y88grk-5a7dvs?file=app.component.html 

 

Query 2: “By the way, it would be nice to have the possibility of setting the minWidht too.” 

 

Yes, you can set the minWidth for the dialog using the CSS property for the dialog wrapper(.e-dialog) element. Check the below CSS style and above shared sample for reference. 

 

 

<style> 

    .e-dialog { 

      min-width: 300px; 

    } 

  </style> 

 

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith 

[Revanth Krishnan]

Hi Ernesto, 

 

 

Thanks for the patience. 

 

 

We have included the fix for “Setting the dialog minHeight property as number is not working properly” with the package version 19.1.63.    

Can you please upgrade your package to this version to resolve the issue on your end?  

  

Release Note: https://ej2.syncfusion.com/angular/documentation/release-notes/19.1.63/?type=all#dialog 

 

Sample: https://stackblitz.com/edit/angular-y88grk-fy1zrg?file=app.component.ts 

 

Regards,  

Revanth 

[Ernesto Yoon]

Thank you Revanth, I updated the component to that specific version and now minHeight can be set as a number.

Regards,

Ernesto

[Revanth Krishnan]

Hi Ernesto, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved. Please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[Amalia Chrysanthakopoulou]

It seems strange that there is a property called minHeight but not minWidth. It would make more sense to support both of them using API.

How can we achieve setting min width by not using static css? I would like to have a minWidth as an input to my component and apply it to my dialog.

Thank you!

[Yaswin Vikhaash Rajaretenam]

Hi Amalia Chrysanthakopoulou,

We already  have considered “Need to provide support for MinWidth property for Dialog component” as a feature from our end, but we do not have any immediate plan to implement this feature. At the planning stage for every release cycle, we review all open features and implement the features based on feature rank, customer requested count and volume wish-list.

The status of implementation can be tracked through the below portal link: 

Need to provide support for MinWidth property for Dialog component in Blazor | Feedback Portal (syncfusion.com)

Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation.

Regards,

Yaswin Vikhaash