1. Home
  2. Forum
  3. Blazor
  4. Hide input and only show icon

Hide input and only show icon

Hi

Is it possible to hide input box and only show the calendar icon?

Regards,

Stefan



3 Replies
DR Deepak Ramakrishnan Syncfusion Team September 13, 2021 12:11 PM UTC

Hi Stefan, 

Greetings from Syncfusion support. 

Yes we can hide the input by setting ‘Width’ property as ‘0px’ and followed by the below highlighted styles. Kindly refer the below code and sample for your reference. 


@using Syncfusion.Blazor.Calendars 
 
<SfDatePicker TValue="DateTime?" Width="0px"></SfDatePicker> 
 
 
<style> 
    input.e-input, .e-input-group input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper input { 
        padding-left: 0px !important; 
    } 
 
    .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]){ 
        border-color: transparent; 
    } 
 
    .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) { 
        border-color: transparent; 
    } 
    .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon{ 
        border: 0px solid; 
    } 
</style> 



Kindly revert us if you have any concerns in it. 

Thanks, 
Deepak R. 


ST Stefan replied to Deepak Ramakrishnan September 13, 2021 04:34 PM UTC

Hi 

Thanks for quick reply. Almost there.

If you set the background color to dark(bg-dark). You can see a white vertical line, see attached image. How to remove this?

Second how do I change calendar icon color to white?

Regards,

/Stefan




DR Deepak Ramakrishnan Syncfusion Team September 14, 2021 09:30 AM UTC

Hi Stefan, 

Thanks for your update. 

We have validated your requirement with provided details and created a sample as per requirement. The white vertical line show due to the border color has not changed so here we have changed the border color in the below code and we can change the icon color to set the font color(color attribute) as while kindly find the below high lighted code and sample for your reference 
 
<style> 
 
.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) { 
        border-color: black !important; 
        box-shadow: 0px 0px 0px 0px black !important; 
    } 
 
 
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { 
        border: 0px solid; 
        color: white; 
    } 
 
 
 
 
Alternative Solution :  
 
Also You can use different built-in theme sets to modify the UI appearance of our Syncfusion form components . For that kindly refer the below documentation and demo for your reference .  

 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon