Dropdown floating label

[Cedric E]

Hi,

Is it possible to implement the floating label using a dropdown? Like in the country field(here) of the sample in textbox. I'm thinking of using TextboxComponent and DropdownListComponent and change the dropdown visiblity whenever the user clicks the textbox but maybe there's a more cleaner way of doing this.

Thanks

[Berly Christopher]

Hi Cedric, 

  

Greetings from Syncfusion support.  

  

We would like to inform you that, we have implemented the floatLableType property for TextBox and DropDownList component which is used to achieve the requested requirement.  

  

 render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <div className='col-lg-6'> 

                        <div id="local"> 

                            <h4> DropDownList</h4> 

                            <DropDownListComponent id="games" dataSource={this.sportsData} fields={this.localFields} placeholder="Select a game" popupHeight="220px" floatLabelType="Auto"/> 

                        </div> 

                    </div> 

                    <div className='col-lg-6'> 

                        <div id="remote"> 

                            <h4>TextBox</h4> 

                            <TextBoxComponent id="textbox" placeholder="Enter your name" floatLabelType="Auto"/> 

                        </div> 

                    </div> 

 

                </div> 

                 

            </div>); 

    } 

} 

  

Sample Link: https://stackblitz.com/edit/react-7emsrv?file=index.js  

  

Please refer the below documentation to know more about this property.  

API Link: https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#floatlabeltype 

  

Regards, 

Berly B.C