Changing fontsize with textboxes and combo boxes

[chris johansson]

Is there a simple way to change to a custom font size inside the box for a textbox and a combo box. 

I know of CssClass="e-small"

I tried to use a custom class didn't seem to take.  

Thanks

[Sevvandhi Nagulan]

Hi Chris, 

Greetings from Syncfusion support. 

You can customize the font-size as per the own need using below css code. 

<SfComboBox TValue="string" TItem="GameFields" CssClass="e-custom" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 

    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings> 

</SfComboBox> 

 

<SfTextBox @bind-Value="@textBoxVal" CssClass="e-custom"></SfTextBox> 

 

<style> 

    .e-input-group.e-control-wrapper.e-custom .e-input { 

        font-size: 20px; 

    } 

</style> 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FontSizeCustomization-1443144537 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Andrew Fong]

Hi Syncfusion team,

The above solution does not work when you use Placeholder and FloatLabelType as well. Please see code below which is just one line of additional code from the sample solution.

------------

<SfComboBox TValue="string" TItem="GameFields" CssClass="e-custom" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games">


    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
</SfComboBox>


<SfTextBox @bind-Value="@textBoxVal" CssClass="e-custom"></SfTextBox>
<SfTextBox @bind-Value="@textBoxVal" Placeholder="Some text box" FloatLabelType="@FloatLabelType.Auto" CssClass="e-custom"></SfTextBox>


 @code{
     ....
}


<style>
    .e-input-group.e-control-wrapper.e-custom .e-input {
        font-size: 8px;
        color: red;
    }
</style>

[Ponmani Murugaiyan]

Hi Andrew,  

Please override the below style to meet your requirement. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Customization1820368278 

<style> 

    .e-input-group.e-control-wrapper.e-custom .e-input { 

        font-size: 8px; 

        color: red; 

    } 

    .e-custom.e-input-group, 

    .e-custom.e-input-group.e-control-wrapper, 

    .e-custom.e-float-input, 

    .e-custom.e-float-input.e-input-group, 

    .e-custom.e-float-input.e-control-wrapper, 

    .e-custom.e-float-input.e-input-group.e-control-wrapper { 

        font-size: 8px; 

        color: red; 

    } 

</style> 

Output: 

 

Regards, 

Ponmani M 

[Ranjani Prabakaran]

 

[Vinitha Jeyakumar]

Hi Andrew, 

Query 1. " Change the font and font size of the Floating label"

You can use the below CSS styles code to customize the Floating label,

Code snippet:

.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {

       

        font-size: 20px;

        font-family: cursive;

    }

Query 2. "Change the height of the combobox"

Please check the below CSS code to customize the ComboBox height,

Code snippet:

.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea​​.e-input {

       

        height: 50px;

    }

Regards,

Vinitha

[Andrew Fong]

Thank you very much, support team. This is invaluable in my design.

Regards

[Ponmani Murugaiyan]

Hi Andrew, 

Welcome, please get back us if you need further assistance. 

Regards, 

Ponmani M