How to reduce height of multi select drodpwn

Question

I have an sftextbox and sfmultiselect dropdown control in my razor component.I would like to know how to make same height of multiselect and textbox control.please check below screencast and source code for your reference.

https://www.screencast.com/t/k5zBxtVTS

Attachment: DataentryUI_4a1f5c5d.rar

Deepak Ramakrishnan · Answer

Hi Kins, 
  
 
Greetings from Syncfusion support. 
  
 
 
We have validated your requirement and found that you have used ‘FloatLabelType’ as ‘Always’  hence the placeholder always placed at the top which results in the increasing the container element height . Now we have modified the sample as per your requirement and attached below for reference. 
  
 
Sample Link :  https://www.syncfusion.com/downloads/support/forum/169896/ze/DataentryUI-3347281  
  
 
[SRF.razor] 
 




<SfMultiSelect ID="MultiSelect"  TValue="string[]" CssClass="e-small" TItem="GameFields" Placeholder="Select Games" 
                                            Mode="@VisualMode.Box"  
                                           DataSource="@Games" ShowSelectAll="false" EnableSelectionOrder="true" 
                                           ShowDropDownIcon="true" FilterBarPlaceholder="Factory List"> 
 
 
We have removed the FloatLabelType in the above code snippet . 
  
 
 
Thanks, 
Deepak R.

KINS · Answer

Thanks for reply....I am getting another issue. Please check my comments in below screencast for better understanding and also please check my component with css file...https://www.screencast.com/t/BDRtcTY8Attachment: Country_d4c628ba.zip

Deepak Ramakrishnan · Answer

Hi Kins, 
 
Thanks for your update. 
 
We have validated the issue with provided details in mentioned resolution , But unfortunately we couldn’t able to reproduce the issue in our end. We have attached and recreated the sample based on your update.Kindly check it for your reference. 
 
Sample Link :   https://www.syncfusion.com/downloads/support/forum/169896/ze/DataentryUI-180441705  
 
Video Link :  https://www.syncfusion.com/downloads/support/forum/169896/ze/DataentryUI_-_Google_Chrome_2021-10-28_12-43-381138582148  
 
 
 
 
Still you can reproduce the issue in your end kindly provide the following details to proceed further in our end. 
 
1.           Simple runnable sample or modify the above recreated sample  which reproduces the issue (If we have missed anything in that) 
2.           If any specific replication procedures you have followed other than the video demonstration. 
3.             If you are facing the issue alone when placing the multiselect component inside other component (In the attached snippet you have used some custom component) 
4.             If you facing the issue when dynamically changing the system resolution after the component is rendered . 
 
 
The above details will help us to anlayse further and provide you the better solution. 
 
 
Thanks, 
Deepak R.

KINS · Answer

sorry for late reply...please check attached modified code, now you can get my problem in attached code. Please check this and advise how to resolve this issue.note:-I have place "EditForm" in div which class in "divzoom"

KINS · Answer

forgot to attach modified code.Attachment: DataentryUI_a71b339.rar

Deepak Ramakrishnan · Answer

Hi Kins, 
 
Thanks for your update. 
 
We are currently validating the requirement in our end . We will update the further possibilities in two business days(19th,November 2021).We appreciate your patience until then. 
 
Thanks, 
Deepak R.

KINS · Answer

awaiting for reply...

Deepak Ramakrishnan · Answer

Hi Kins, 
 
Thanks for your update. 
  
We are still validating the issue in our end. We will update the further details in one business day (22nd,November 2021).We appreciate your patience until then. 
 
 
Thanks, 
Deepak R.

KINS · Answer

awaiting for prompt reply...

Deepak Ramakrishnan · Answer

Hi Kins, 
 
Thanks for your update. 
 
We have validated the issue with provided sample and still it get not reproduced at our end with mentioned resolutions , also we have tried to reproduce the issue with different scaling factors . We suspect that the popup position not get refreshed while dynamically changing the resolution of the window screen. So as mentioned earlier kindly provide the use case for changing the resolution on runtime . Also we suggest you to change the resolution before running the application and let us know that the issue still persist. 
Also we request you render  the component without any parent component and try to replicate the issue in mentioned resolution and provide the details .This details will help us to analyse further and provide you the better solution. 
 
Thanks, 
Deepak R.

KINS · Answer

I have already provided screencast and problematic source code with example.please look into this..please check is there any bugs ??please help

Ponmani Murugaiyan · Answer

Hi KINS, 

Thanks for the updated. 

We able to replicate the reported issue while change the browser resolution in your provided sample. We would like to know you that the popup will dynamically created when you click on the drop icon or focus into input. So, the popup will open below the input based on the input position. 

As per your sample, you have customized the zoom styles for div element. While the resolution changes the input width and height are adjusted. So, the popup position mismatched. Due to this reason, the popup gets opened above the input, so while focusing the input, the popup gets opened and considered that first element is selected. So that your reported issue occurred while resolution changes. 

This is not a bug and you can resolve this issue by updating the customized zoom styles to the popup element also, as like below code snippet to resolve the reported issue. 

[SFR.razor] 




public async Task OnOpen(PopupEventArgs args) 
    { 
        await JSRuntime.InvokeVoidAsync("created", "MultiSelect"); 
    } 
  
[wwwroot/dropdown.js] 




window.created = function (id) { 
    setTimeout(function (e) { 
        var instances = document.getElementById(id); 
        var popupObj = instances.blazor__instance.popupObj; 
        popupObj.element.classList.add("DivZoomPopup"); 
    }, 50) 
} 

Styles 




.DivZoom { 
            height: 100%; 
            width: 100%; 
        } 
 
        .DivZoomPopup { 
            width: 100%; 
        } 
 
        @@media(min-width:1367px) { 
            .DivZoom { 
                height: 100%; 
                width: 100%; 
                zoom: 125%; 
            } 
 
            .DivZoomPopup { 
                width: 100%; 
                zoom: 125%; 
            } 
        } 

Note: For popup zoom styles, height should be applied based on its list item count, so we have not applied height. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataentryUI1432514693 

Kindly check with the above sample meets your requirement. Please get back us if you need further assistance. 

Regards, 
Ponmani M

KINS · Answer

Thanks working fine.can you please advise how to globally defined above  code for all dropdown control ??because I have more than 100 dropdown control

Deepak Ramakrishnan · Answer

Hi Kins, Thanks for your update. Yes we can create generic method and pass the respective component ID to the interop method .Kindly refer the below code snippet and sample for your reference.

@code { public async Task OnOpen(string id) { await JSRuntime.InvokeVoidAsync("created", id); } } Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataentryUI920333119.zip Thanks, Deepak R.