Css Clarification in SFGrid and sfcombobox

Question

I have below clarification of sfgrid CSS.

1.How to make Grid Header color as "Light Grey"

2.How to remove box in Action button (Edit/Delete button)

3.How to change fontsize for sftextbox and sfcombobox including placeholder font.

Rahul Narayanasamy · Answer

Hi Ahmed, Greetings from Syncfusion. Query: How to make Grid Header color as "Light Grey" We have validated your query and you want to change the Grid header background color. You can achieve your requirement by using below CSS style. Find the below code snippets and screenshot for your reference. Also we suggest you to refer the below documentation for customizing styles in the grid. https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/ https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles/ [Screenshot] Query: How to remove box in Action button (Edit/Delete button) We suspect that you want to remove the border around the actions buttons. We need some details regarding the reported query. Could you please share the below details. It will be helpful to validate and provide a better solution. Share a screenshot of the action buttons which needs modification. Which Syncfusion theme was currently you are using?(like bootstrap, bootstrap4, fabric, etc). Query: How to change fontsize for sftextbox and sfcombobox including placeholder font. You want to change the font for the SfComboBox textbox. You can achieve your requirement by using below CSS. Find the below code snippets for your reference. We have already documented this topic in our documentation. Find the below reference for your reference. Reference: https://blazor.syncfusion.com/documentation/combobox/style/ [Screenshot] Please let us know if you have any concerns. Regards, Rahul

KINS · Answer

Thanks for support How  can I change the height of sftextbox and sfcombobox ???For second  query I am using material themesee the video link for second queryhttps://www.screencast.com/t/QoDtCypnvX0

Renjith Singh Rajendran · Answer

Hi Ahmed, Query : How can I change the height of sftextbox and sfcombobox ??? We suggest you to apply styles for the corresponding components as like below to achieve this requirement. Query 2 : see the video link for second query https://www.screencast.com/t/QoDtCypnvX0 We suggest you to add the below style in your application to prevent the button hovering behavior. Please get back to us if you need further assistance. Regards, Renjith R

KINS · Answer

Thanks for report..it's working fine.. but fonts not changing for dropdown.please advise the css class for dropdown font and drop down placeholder font

Sevvandhi Nagulan · Answer

Hi Ahmed, 


Please refer the below UG documentation for changing the font and placeholder font.  

https://blazor.syncfusion.com/documentation/dropdown-list/style/ 

https://blazor.syncfusion.com/documentation/dropdown-list/style/#customizing-the-appearance-of-wrapper-element 

https://blazor.syncfusion.com/documentation/dropdown-list/style/#customizing-the-color-of-the-placeholder-text 


Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N

KINS · Answer

I have check below css from above link but it's shows an error message as

"::placeholder" is not a valid pseudo-element".e-ddl.e-input-group input.e-input::placeholder {
    color: red;
}

Sevvandhi Nagulan · Answer

Hi Ahmed, 


We checked your query. In order to avoid the reported issue, please add the ::-moz-placeholder and ::-webkit depending on the browser. Please refer the below code. 






  .e-ddl.e-input-group input.e-input ::-webkit-input-placeholder { 
        font-family: emoji; 
    } 


Stack overflow link: https://stackoverflow.com/questions/58564686/error-when-attempting-to-change-a-placeholders-color 


Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N

KINS · Answer

I have tried below css and check all browser but still not working

.e-ddl.e-input-group input.e-input ::-webkit-input-placeholder {

font-size: 13px;

letter-spacing: 0px;

font-weight: 500;

font-family: "Poppins";

color:green;

}

e-ddl.e-input-group input.e-input ::-moz-placeholder {

font-size: 13px;

letter-spacing: 0px;

font-weight: 500;

font-family: "Poppins";

color: green;

}

e-ddl.e-input-group input.e-input :-ms-input-placeholder{

font-size: 13px;

letter-spacing: 0px;

font-weight: 500;

font-family: "Poppins";

color: green;

}

e-ddl.e-input-group input.e-input :-ms-input-placeholder {

font-size: 13px;

letter-spacing: 0px;

font-weight: 500;

font-family: "Poppins";

color: green;

}

KINS · Answer

please help it's my top most urgent

KINS · Answer

awaiting for reply

Sevvandhi Nagulan · Answer

Hi Ahmed, You have incorrectly used the selectors. Please find the modified code below. We have ensured in all the browsers and working as expected. @using Syncfusion.Blazor.DropDowns @code { public List data = new List { "a", "b" }; } Please find the sample link below. Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL1506737739 Kindly get back to us for further assistance. Regards, Sevvandhi N

KINS · Answer

thanks for reply....I have another issue,please check my comments in below videohttps://www.screencast.com/t/Jw86rzHJw

KINS · Answer

please help...

Sevvandhi Nagulan · Answer

Hi Ahmed, We checked the comments in the provided video. We modified the style customization code based on the requirement and attached it below. Refer the following code and sample. @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Inputs @code { public List data = new List { "a", "b" }; } Please find the sample below. Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerApp5.0119600718 Kindly get back to us for further assistance. Regards, Sevvandhi N

KINS · Answer

Thanks Thanks but placeholder font not working for textbox.please check below linkhttps://www.screencast.com/t/ANHnvWWNsiPp

KINS · Answer

pls help

Sevvandhi Nagulan · Answer

Hi Ahmed,

We checked your query. Based on the requirement we modified the code and changed the float label element color for textbox component also. Refer the below sample.

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

In addition, you can download theme from the theme studio by changing the primary color, accent color and choose the components which you want to change color. Then refer the downloaded css in your application to customize the color of the control.

Themestudio link: https://ej2.syncfusion.com/themestudio/?theme=material

Regards,

Sevvandhi N

KINS · Answer

Thanks working fine But how to change the placeholder and value fonts if syncfusion control is readonly or disabled

Sevvandhi Nagulan · Answer

Hi Ahmed, 


We checked your query. Please find the style for customizing the disabled color. Also, readonly color will be changed with the previously shared style customization code. 






.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input input[disabled], .e-float-input.e-control-wrapper input[disabled], .e-float-input textarea[disabled], .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled { 
        -webkit-text-fill-color: green; 
        font-size: 13px; 
        letter-spacing: 0px; 
        font-weight: 500; 
        font-family: "Poppins"; 
    } 
 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL833538698 


Regards, 
Sevvandhi N

KINS · Answer

I have another clarification in placeholde.please check below link to solve this issue.https://www.screencast.com/t/oJ3J0Uamc

Sevvandhi Nagulan · Answer

Hi Ahmed, 


We checked your query. Please use the below selector to customize the focusing color after the value has been selected.  Refer the below code. 






    .e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-float-input .e-float-text.e-label-top { 
        font-size: 13px; 
        letter-spacing: 0px; 
        font-weight: 500; 
        font-family: "Poppins"; 
        color: green; 
    } 


Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL648496897 

Kindly get back to us for further assistance. 

Regards, 
Sevvandhi N

KINS · Answer

thanks for support.it works fine,but i have one more clarification.pls check below linkhttps://www.screencast.com/t/LUosGh8F CSS:-.e-ddl.e-lib.e-input-group.e-control-wrapper.e-float-input .e-float-text.e-label-top {    font-size: 14px;    letter-spacing: 0px;    font-weight: 500;    font-family: "Poppins";    color: black;}label.e-float-text, .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {    font-size: 14px;    letter-spacing: 0px;    font-weight: 500;    font-family: "Poppins";    color: black;}.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: 14px;    letter-spacing: 0px;    font-weight: 500;    font-family: "Poppins";    color: black;}.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input input[disabled], .e-float-input.e-control-wrapper input[disabled], .e-float-input textarea[disabled], .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled {    -webkit-text-fill-color: black;    font-size: 14px;    letter-spacing: 0px;    font-weight: 500;    font-family: "Poppins";    color: black;}.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-float-input .e-float-text.e-label-top {    font-size: 9px;    letter-spacing: 0px;    font-weight: 500;    font-family: "Poppins";    color: red;}

Sevvandhi Nagulan · Answer

Hi Ahmed, 


We checked your query. We request that you to use below CSS code for bold the placeholder text when using the float label property. Refer the below code. 





  .e-input-group.e-control-container.e-float-input.e-control-wrapper label.e-float-text               { 
        font-weight: bold !important; 
  } 


Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL269173933 


If this solution does not help you, we request that you detail all of your questions about changing the color of placeholders so that we can address all of the requirements. 


Regards, 
Sevvandhi N

KINS · Answer

thanks for support,I have another clarification in grid css.please check my comments in below image

Rahul Narayanasamy · Answer

Hi Ahmed, Thanks for the update. Query: I have another clarification in grid css.please check my comments in below image We have validated your query with the provided details and you can achieve your requirement by using below CSS. Find the below code snippets and sample for your reference. Sample: https://www.syncfusion.com/downloads/support/forum/167642/ze/SampleT-1854005357 Please let us know if you have any concerns. Regards, Rahul

KINS · Answer

sorry for late replythe below css is not working for changing font of textbox

Sevvandhi Nagulan · Answer

Hi Ahmed, 


We checked your query. We can change the textbox component’s font by using the below style code.  Refer the below code. 






     .e-input-group.e-control-container.e-control-wrapper.e-float-input .e-control { 
        font-size: 20px; 
        font-family: 'French Script MT'; 
        color: #ab3243; 
    } 

Screenshot: 

  

Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N

KINS · Answer

everything works finebut how to change font for sfmultiselect placeholder.

Berly Christopher · Answer

Hi Ahmed, We can change the font family of the MultiSelect placeholder with help of below CSS styles. Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_placeholder_167642-1246432281 Regards, Berly B.C

KINS · Answer

I have another two clarification.1.How to change dropdown item value font.2.Place Holder font family not changing (see below css).I have set "Helvatica font but its showing as "Roboto" font .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 {    letter-spacing: 0px;    font-size: 10px;    color: red;    font-family:Helvetica !important;}Please check below screencast for first queryhttps://www.screencast.com/t/GJJiBdLoByQA

Berly Christopher · Answer

Hi Ahmed, We have achieved the two requested requirements with below mentioned CSS styles. Screenshot: Please find the sample from the below link. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0584521445 Regards, Berly B.C 1

KINS · Answer

sorry for late reply......everything's works fine but I have another clarification.1.I would like to change the font size of "place holder" when validation is done in Editform.2.How to change place-holder text as "pascal case (text-transform:capitalize)"  for all input field.3.How to change place-holder text as "pascal case

(text-transform:capitalize)" for grid Header

Berly Christopher · Answer

Hi Ahmed, Query 1: 1. I would like to change the font size of "place holder" when validation is done in Editform. 2.How to change place-holder text as "pascal case (text-transform:capitalize)" for all input field. Response: We can achieve the requested requirement with help of below CSS styles. Please find the sample from the below link. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(2)495810512 Query 2: How to change place-holder text as "pascal case (text-transform:capitalize)" for grid Header Response: We will check and update the details on tomorrow (19th November 2021). Regards, Berly B.C

KINS · Answer

Thanks for update

I have another clarification

Text-tranform is working fine for placeholder

And also I have applied the same for textbox

But I can not get exact Text-tranform value from textbox in .cs code

For example

In textbox, I am trying to enter customer name as lowecase,as per css rule it coverts as "capitilize Text-tranform format" but when I trying to get value from c# code (model binding in editform) it's returns as lowercase only.I need to get exact Text-tranform value in c#code ( capitalize format)

Berly Christopher · Answer

Hi Ahmed, Query 1: How to change place-holder text as "pascal case (text-transform:capitalize)" for grid Header Response: We have validated your query and we are quite unclear about your requirement(place-holder in Grid header). We suspect that you want to apply the style(text-transform:capitalize) to Grid header text. You can provide the HeaderText text based on your convenience by using HeaderText property directly like below. (or) If you want to apply the text-transform style to header text by using CSS, then you can achieve your requirement by using below CSS. Please let us know if you have any concerns. Query 2: But I can not get exact Text-tranform value from textbox in .cs code Response: By default, the entered text will be updated in the @bind-value attribute. You can get the entered text in the capitalize format with help of ToTitleCase() method below code example. CultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower()); Screenshot: Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(3)309340834 Regards, Berly B.C

KINS · Answer

Thanks for quick support...For Edit Form Clarification:-How to use below function for EditForm textbox controlCultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower());

For Grid Column clarification I have two columns in grid 1.Customer Code2.Customer NameI would like to know how to make customer code row cell value as "uppercase" and Customer Name row cell value as "Capitilize"

Berly Christopher · Answer

Hi Ahmed, Query 1: For Edit Form Clarification:- How to use below function for EditForm textbox control CultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower()); Response: We can achieve the requested requirement by affect the bind-value property with help of getter setter function as mentioned in the below code example. [Required(ErrorMessage = "Name is required")] public string TextValue { get => _value; set { _value = (value != null) ? CultureInfo.CurrentCulture.TextInfo.ToTitleCase(value.ToLower()) : null; } } Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(4)427046909 Query 2: For Grid Column clarification I have two columns in grid 1.Customer Code 2.Customer Name I would like to know how to make customer code row cell value as "uppercase" and Customer Name row cell value as "Capitilize" Response: We have validated your query and based on your requirement, we suggest you to achieve your requirement by using CustomAttributes. Find the below code snippets and sample for your reference. Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#custom-attributes @code{ . .. } Sample: https://www.syncfusion.com/downloads/support/forum/167642/ze/SampleCA-2123320330 Please let us know if you have any concerns. Regards, Berly B.C