1. Home
  2. Forum
  3. Blazor
  4. DateTime Picker content alignment & font size

DateTime Picker content alignment & font size

Hello,

I am using Syncfusion DateTime Picker, and the component's content is not centered vertically. I attached a screenshot of it.


Is there any way to center the content vertically?  I would also like to know if the font size of the content can be increased?

Thanks in advance!

Regards,
Istvan Szöke

Attachment: DateTimePicker_e0d41153.rar

11 Replies
PM Ponmani Murugaiyan Syncfusion Team May 14, 2020 07:48 AM UTC

Hi Salimkhan, 
 
Greeting from Syncfusion support. 
 
Case1: Is there any way to center the content vertically?   
 
The content will be always in center of the textbox. We have prepared sample for your reference. If you had made any customization, please ensure with your style. If issue still exists in your end, you can override using the below style. 
 
    .input.e-input,  
    .e-input-group input,  
    .e-input-group.e-control-wrapper input,  
    .e-input-group input.e-input,  
    .e-input-group.e-control-wrapper input.e-input { 
        height: 30px; 
    } 
 
 
Output: 
 
 
 
Case2: I would also like to know if the font size of the content can be increased. 
 
Yes , you can increase the font size of the placeholder. Please find the code snippet and test sample below.  
 
[Index.razor] 
 
@using Syncfusion.Blazor 
@using Syncfusion.Blazor.Calendars 
 
<SfDateTimePicker TValue="DateTime?" Placeholder='Select a date and time'></SfDateTimePicker> 
 
<style> 
    .e-input-group,  
    .e-input-group.e-control-wrapper{ 
        font-size: 16px; 
    }  
</style> 
 
 
Kindly check with the above sample. If issue still exists in your end, please get back us we will assists you further. 
 
Regards, 
Ponmani M 


SI Szöke Istvan June 11, 2020 04:15 PM UTC

Hello Ponmani,

Sorry for the late reply. Thank you for your help, but meanwhile my problem solved without these CSS styles.

But another question come to my mind. How can I override globally in my application the default Syncfusion font-family and font-size style for all of your components (data editors, radiobutton, uploader, dialog, etc.) ?

Thanks in advance!

Regards,
Istvan

PM Ponmani Murugaiyan Syncfusion Team June 15, 2020 03:26 AM UTC

Hi Szöke, 

Good day to you. 

We have prepared sample by override the styles for font-family. Please find the sample below. 


Regards, 
Ponmani M 


SI Szöke Istvan June 15, 2020 07:37 AM UTC

Hello Ponmani,

Thank you for the update. The provided style works perfectly for all of your components, except the RadioButton component. In case of RadioButton, the font-family will not be overwritten (as you can see on my attached screenshot).

What style should I define to override the RadioButton font-family as well?

Regards,
Istvan

Attachment: radiobuttonstyle_40dcce01.rar

AD Arunkumar Devendiran Syncfusion Team June 17, 2020 01:25 PM UTC

Hi Istvan, 
 
We have checked your reported query and we suspect that you are trying to change the radio button label style. We have created the sample for your convenience. In that, we have overridden the radiobutton styles. Please refer the below code snippet and sample link. 
 
Index.razor 
 
@using Syncfusion.Blazor.Buttons 
 
<SfRadioButton Label="Option 1" Name="options" Value="1"></SfRadioButton> 
<SfRadioButton Label="Option 2" Name="options" Value="2" Checked="true"></SfRadioButton> 
 
 
<style> 
    .e-radio-wrapper .e-radio + label .e-label { 
        font-size: 18px; 
    } 
</style> 
 
 
Sample link: 
 
Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 
 
Regards, 
Arunkumar D 


SI Szöke Istvan June 17, 2020 05:28 PM UTC

Hello Arunkumar,

Thanks for your help. The provided solution works well.

Regards,
Istvan

AD Arunkumar Devendiran Syncfusion Team June 18, 2020 10:57 AM UTC

Hi Istvan, 
 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this.  
 
Regards, 
Arunkumar D 


SI Szöke Istvan August 24, 2020 07:13 AM UTC

Hello Arunkumar,

I would like to ask for help again. I tried to investigate and customize the font-size in your Uploader component & Grid component based on your previously provided styles but with no success.

I attached 2 screenshots to demonstrate the texts that should be smaller (.77rem). Can you help me to achive my goal?

Regards,
Istvan

Attachment: fontsize_870ce8e3.rar

PM Ponmani Murugaiyan Syncfusion Team August 25, 2020 03:45 PM UTC

Hi Szöke,  

Thanks for the update. 

Query1:  Customize the font-size in your Uploader component 

We would like to inform you that Uploader component wrapper contains the button, drop area and file list container. So we suggest you to use the below style to override the font-size of Uploader component. Please find the test sample below for reference. 

<style> 
    /*Override the style for Uploader component*/ 
    button.e-css.e-btn.e-upload-browse-btn { 
        font-size: 20px; 
    } 
    .e-upload .e-file-select-wrap .e-file-drop { 
        font-size: 20px; 
    } 
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name { 
        font-size: 20px; 
    } 
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type { 
        font-size: 20px; 
    } 
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size { 
        font-size: 20px; 
    } 
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status { 
        font-size: 20px; 
    } 
</style> 

 
Query2:  Customize the font-size in your Grid component  
  
We have analyzed your query and we suggest you to change the font size of text displayed “No Records to Display” using below EmptyRecordTemplate. And also we suggest you to change the Grid content and header font size using below CSS style.  Refer the below code example.   
  
<SfGrid TValue="Order" AllowSorting="true" AllowPaging="true"> 
    <GridTemplates> 
        <EmptyRecordTemplate> 
            <div style="font-size: .77rem"> No Records to Display</div> 
        </EmptyRecordTemplate> 
    </GridTemplates> 
    . . .. . . . 
</SfGrid> 
 
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowSorting="true" AllowPaging="true"> 
    . . .. . 
</SfGrid> 
 
<style> 
    /*to change the font size of grid header*/ 
    #Grid.e-grid .e-headercelldiv { 
        font-size: .77rem; 
    } 
    /*to change the font size of grid content*/ 
    #Grid.e-grid .e-rowcell { 
        font-size: .77rem; 
    } 
</style> 
   
Kindly download the sample from below which we have prepared using above solution.  
  
  
Kindly check with the above sample. Please get back us if you need further assistance. 
 
Regards, 
Ponmani M 


SI Szöke Istvan August 26, 2020 12:38 PM UTC

Hello Ponmani,

Thank you very much!

Regards,
Istvan

PM Ponmani Murugaiyan Syncfusion Team August 27, 2020 05:11 AM UTC

Hi Szöke, 

Thanks for the update. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


Loader.
Up arrow icon