Editing the size of a box on a form

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to increase the size(height) of the file input field, so the "Choose file" button appears entirely within the input, like this http://prntscr.com/18h7dhe

Solution:
This is caused by a style conflict with the theme. And needs to be fixed using custom CSS code. For example:

.site-container .form-control {
    height: auto;
}

This support ticket is created 3 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 3 replies, has 2 voices.

Last updated by katerinaH 3 years, 7 months ago.

Assisted by: Jamal.

Author

Posts

July 4, 2021 at 9:22 am #2105897

katerinaH

Hi,

Tell us what you are trying to do? I'm trying to amend the size of two (file format) boxes on a form. See more here >>> hidden link

Is there any documentation that you are following? I've looked at this tutorial (https://toolset.com/lesson-placement/lesson-placements-1621521-1612327) but it doesn't make sense to me in the context of what I'm trying to do.

What is the link to your site? hidden link

Thanks

July 4, 2021 at 9:54 am #2105905

Jamal

Hello and thank you for contacting Toolset support.

If I understood well, you want to increase the size(height) of the file input field, so the "Choose file" button appears entirely within the input, like this hidden link, right?
In that case, you need to add custom CSS to the form. This is the part of the article that should help, however, it does not provide details about CSS
https://toolset.com/lesson-placement/lesson-placements-1621521-1612327/#where-to-add-your-custom-css

If you are not comfortable with CSS codes, let me check the form and I'll help with the CSS. Maybe I'll need to login in order to see it. In that case, I am setting your next reply to be private, so you share credentials safely. ** Make a database backup before sharing credentials. **

July 4, 2021 at 12:54 pm #2106017

Jamal

I assume that you were talking about the form on this page, right?
hidden link

I have also seen the same styles on different other pages, such as:
- hidden link
- hidden link
- hidden link

That's why I added the following CSS code to the WordPress customizer instead of adding it to each form. hidden link

.site-container .form-control {
    height: auto;
}

This custom code overrides the styles from Bootstrap, which is conflicting with the theme design.

Please check from your side and let me know if you still need assistance with this. Otherwise, kindly mark this ticket as resolved, and feel free to open a new ticket or chat for any other question/issue.

July 4, 2021 at 2:55 pm #2106031

katerinaH

Thanks so much, that code worked. Although it didn't work by adding the code to my customizer on my live site, I had to add it to the individual forms for it to work.