Showing results for 
Search instead for 
Did you mean: 
Frequent Visitor

Change the Height of Date-Input in PCF to the PCF Component Height

Hi All,

I have added the Date-Input to my PCF Component. I want to change its width and height to the width and height of the PCF component and it should change when we change the width and height of the PCF component on the CanvasApp screen, like if we drag it to either side or up/down to increase it's width and height then width and height of Date-input should also change to that component size as we have for out-of-the-box controls like Text-Input, DatePicker, etc.


I have set my style.width & style.height to 100%. Now, the width of the Date-Input is changing with the component's width when we change or drag the component to either side but it is not applying to height. Height of Date-Input is still the same and not changing with the component's height on Canvas App Screen. 


Note: I just want to change the height of the Input Box in Date-Input to the height of the component, not of the entire Date-Input Calendar when it opens.


Can someone help with some solution to this?

Thanks in advance.

Super User
Super User

Open the developer tools in your browser where you are testing and look at the style elements on the control you wish to change. From here, you can edit the style by adding new style elements or unchecking ones you want to disable. Use this to play with all kinds of style changes without needing to worry about changing code and redeploying. Once you find a combination of style elements that gives you what you want, then update your code and redeploy.

Helpful resources

UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Microsoft Ignite 768x460.png

Find your focus

Explore the latest tools,training sessions,technical expertise, networking and more.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,569)