|
Ryan Woodman
|
September 22, 2015 at 2:07 pm
Hi. Seth helped us upgrade to EE4 from EE3 and I am just cleaning up some issues. Please take a look at our checkout form for the MDA Summer class as an example – dentalstaffinstitute.com. The text fields run all the way across – would like them shorter – while the text boxes for long answers are tiny. Is there some CSS that carried over from version 3 that made it this way or is there something in my templates that is incorrect/needs to be changed. I want to make sure that I fix this the right way so it won’t recur on updating. Lastly, how do I remove the option for people to enter a new state/province to the dropdown. I finally got them all cleaned up and I don’t want registrants to change the list. Thanks!
|
|
Tony
|
September 23, 2015 at 4:48 am
Hi Ryan,
The text boxes allow you to resize them manually within the registration form.
If you click the bottom right corner you can drag them to different sizes. However on page load they will always load at the smaller size, we can provide some css that can change this, for example:
.ee-reg-qstn textarea {
width: 50%;
}
Which looks like this – http://take.ms/o8v1h
The same can be done with the labels (the text) like so:
lable.ee-reg-qstn,
{
width: 50%;
}
Which then looks like this – http://take.ms/55TQz
The sisez can be changes on either of those to suit.
However if you want them both to be the same width you can combine that into one using:
lable.ee-reg-qstn,
.ee-reg-qstn textarea {
width: 50%;
}
Does that help?
We recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.
|
|
Ryan Woodman
|
September 25, 2015 at 2:10 pm
perfect, I will try these. Thanks
|
|
Ryan Woodman
|
September 25, 2015 at 3:07 pm
ok, I have beautiful text boxes now but I can’t quite get the rest. I would like text areas 70% wide, 150px high (got that), labels full width (got that), single line text answers 50% (can’t seem to get that). Also, How do I make the “add a new state/province” disappear?
Lastly, is there a comprehensive list of CSS classes for EE anywhere for reference?
Thanks so far.
|
|
Lorenzo Orlando Caum
|
September 26, 2015 at 3:17 pm
Hi Ryan, could you provide a link to any event on your site so we can see what you have so far?
On the CSS list, you can inspect any element using a free tool like Chrome developer tools or Firebug and you’ll see the CSS that is in use.
This line of CSS will remove that state/province option:
.ee-form-add-new-state-lnk.display-the-hidden.smaller-text { display:none }
—
Lorenzo
|
|
Ryan Woodman
|
October 1, 2015 at 8:58 am
Hi Lorenzo,
here is one: http://dentalstaffinstitute.com/events/2016-summer-session-modern-dental-assisting/
I would like the text boxes to be maybe 1/3 the way across. The rest is great. I am having another issue but I will open in a new thread. Thanks
|
|
Lorenzo Orlando Caum
|
October 1, 2015 at 10:50 am
Hi Ryan,
Does the following CSS help?
#ee-single-page-checkout-dv input[type="text"].ee-reg-qstn, #ee-single-page-checkout-dv input[type="email"].ee-reg-qstn {width:70% !important;}
It changes the text fields to be the same width as the text area fields.
Thanks
—
Lorenzo
|
|
Ryan Woodman
|
October 1, 2015 at 11:03 am
Perfect, thanks that looks great
|
