Support

Home Forums Event Espresso Premium Increase form textbox height

Increase form textbox height

Posted: October 15, 2020 at 5:09 pm


paulswebca

October 15, 2020 at 5:09 pm

Hello,

Is there a way to increase the textbox height https://prnt.sc/v0717c?
I tried using the Custom CSS plugin, but it does not work. https://prnt.sc/v06zxd

https://unitedtraffic.ca/courses/traffic-control-person-certification/


Tony

  • Support Staff

October 16, 2020 at 6:59 am

Hi there,

The CSS your are using is targeting a textarea, which is like the section I/you type into to reply to these forums. The input field on the registration form is not actually a teatarea field but an input of type text, so something like this should work:

.ee-reg-form-attendee-dv input[type=text] {
    height: 250px;
}

However, I do NOT recommend you do this for those fields, they are inputs for a single line input and with the current CSS it makes them look like textarea’s but should only contain a single value for (for example) first name.

May I ask why you are setting those field to look like textarea’s?

Also, you’ve highlted the (For {event name}) text in that screenshot asking how to remove the duplicated text, just to note the reason it is duplicated is your Ticket name and Event Slug match.

That output is {Ticket name}: (For {event name}) and part of the reason for doing that is you may have multiple tickets with the same name across multiple events, if you add 2 of those to the cart without that additional text you don’t know which ticket is for which event.

Removing it can be done, but I’m just checking you are aware of what it is for first as doing so may cause confusion later on.


paulswebca

October 16, 2020 at 10:59 am

Thank you for the explanation.

The customer wants to increase the height of all column boxes. He said they look small and hard to type. He wants them slightly taller. Inside text size is ok. He wants them to this height (right side) or similar https://prnt.sc/v0purp.


paulswebca

October 16, 2020 at 11:21 am

I added this CSS and it worked but the dropdown option is not affected.

.ee-reg-form-attendee-dv input[type=text] {
height: 40px;
}

.ee-reg-form-attendee-dv input[type=number] {
height: 40px;
}


Tony

  • Support Staff

October 19, 2020 at 4:56 am

The customer wants to increase the height of all column boxes. He said they look small and hard to type. He wants them slightly taller. Inside text size is ok. He wants them to this height (right side) or similar https://prnt.sc/v0purp.

Ah, ok. In your screenshot, you set a height of 250px’s so it looked like you were trying to use the inputs as text boxes, my apologies s for misunderstanding.

I added this CSS and it worked but the dropdown option is not affected.

You can combine those css rules into one like this:

.ee-reg-form-attendee-dv input[type=text],
.ee-reg-form-attendee-dv input[type=number] {
    height: 40px;
}

For dropdowns you’ll need to use the select element:

.ee-reg-form-attendee-dv select

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 1 week ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/increase-form-textbox-height/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Comments</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>
[i]
[i]