How can I make the FormItems higher?

[Bernard Jurlina]

Hello!

How can I make my DataForm looks like the one in the online demo? I'm using talwind style.

My DataForm is like this:

but the Items in online demo looks higher and the label font is smaller, like this

ž

I want to get style like that.

Thanks!

[Priyanka Karthikeyan]

Hi Bernard Jurlina,

Thank you for reaching out to us.

It appears that your application is using custom styles, which may be affecting the appearance of the DataForm component. To ensure consistency with the Syncfusion online demos, we recommend applying the following font styles for the group title, label, and input text:

 

​.e-data-form .e-form-group .e-group-title {
font-size: 16px;
   font-weight: 400;
}
.e-data-form .e-form-label {
   font-size: 12px;
   font-weight: 400;
}
.e-input-group:not(.e-float-input) .e-input {

   font-size: 16px

}

Applying these styles should help align the visual presentation with the expected behavior.

If the issue persists after applying the recommended styles, we kindly request you to share a sample that reproduces the issue along with the steps to replicate it. This will help us better understand the scenario and provide a more accurate solution.

Thank you for your cooperation and continued support. We look forward to resolving this for you promptly.

Regards,

Priyanka K

[Bernard Jurlina]

Hi Priyanka K!

Thanks for the answer, but how can I change the height of the textboxes?

Regards,
Bernard.

[Priyanka Karthikeyan]

Hi Bernard,

You can adjust the height of the textboxes by applying the following CSS:

​.e-input-group:not(.e-float-input) .e-input {
   height: 38px
}
 

Please let me know if you'd like help customizing it further!

Regards,

Priyanka K

[Bernard Jurlina]

Hi Priyanka K,

your last solution is just what I need. Thank you.

Regards,
Bernard.

[YuvanShankar Arunagiri]

You are welcome, Bernard. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.