Support

Home Forums Event Espresso Premium EE4 registration-checkout page – question groups drift to the right

EE4 registration-checkout page – question groups drift to the right

Posted: March 31, 2015 at 6:36 pm


Ian Just

March 31, 2015 at 6:36 pm

On the registration-checkout page, each question group is just a bit to the right of the previous one. Just enough to be annoying..

I wondered if this was the theme at work, but it’s happened with both.

Is it the ee-reg-form-qstn-grp-dv CSS padding at work?

EE 4.6.18.p WP 4.1.1


Lorenzo Orlando Caum

  • Support Staff

April 1, 2015 at 6:10 am

Hi Ian, can you post a link to any event so we can inspect the registration checkout page?

Thanks


Lorenzo


Dean

April 1, 2015 at 6:10 am

It sounds like incorrect HTML nesting content, but that should not happen with a default installation.

Can you provide a link to an example please?

Have you made any modifications to core files or template files?


Ian Just

April 1, 2015 at 7:34 am

redacted – Event Espresso support team – LOC

I’ve used the current theme’s files to make the ‘lt-grey-text’ in particular darker:

.lt-grey-text { color : #000000; }
.drk-grey-text { color : #404040; }

.. but no other CSS changes.

There’s a copy of the current ticket_selector_chart.template.php in uploads/espresso/templates/ with a couple of changes (width of ‘price’ column in the ticket selector, ‘select’ rather than ‘Qty*’, commenting out the “Please note that a maximum number of %d tickets can be purchased for this event per order” bit) but those are the ticket selector page, not this one.


Lorenzo Orlando Caum

  • Support Staff

April 1, 2015 at 7:59 am

Hi, your address question group appears within the div for the personal question group.

The shift is caused by this being applied twice when they are nested like that:

.ee-reg-form-qstn-grp-dv {
padding:.5em 1em 1em;
}

They should not be nested:

http://cl.ly/image/2S0L0x3a3Y0d

The ticket editor changes would not cause this. Any customizations to the registration checkout templates?


Lorenzo


Tony

  • Support Staff

April 1, 2015 at 8:12 am

Hi Ian,

It is the padding, but not at the same time.

What’s happening is for some reason all of you question groups are being output within the previous question group.

So Personal Info opens a div, then before it closes, the next question group opens its div, then before that close the next and so on.

So as each new question group is added its adds the padding again which is why the groups move over.

However this doesn’t happen with a default installing using twentyfourteen, so I suspect this is either your sites theme or due to customisations made to one of the template files.

Are you using any of the child theme files from the EE Arabica theme that’s included within Event Espresso?

Or loading your own versions of the templates anywhere else?


Ian Just

April 1, 2015 at 9:16 am

Thanks. The theme is Simple Style by fimply.de and downloaded from the wordpress.org repository. It was previously doing it with Decode from there too and it happens if I use Twenty Fifteen.

No, I don’t think I’ve touched any except the one I’ve mentioned which I think just controls the previous page. Do you want to ask about any in particular, and I can do an MD5sum of it?


Ian Just

April 1, 2015 at 9:28 am

I’ve edited a couple of the questions (the text for the ‘first name’ now asks for someone’s ‘preferred name’ for example) but I don’t think I’ve touched the template for this page or the default CSS one.

MD5s:

790550b1be4d0d9d0db8a0a3f0cf229b modules/single_page_checkout/css/single_page_checkout.css

080f451b4b17824ed1d58efd0ff2838f core/templates/global_assets/css/espresso_default.css

33fc97d89e0b62e46c58539dc168fd0c modules/single_page_checkout/EED_Single_Page_Checkout.module.php


Ian Just

April 1, 2015 at 9:31 am

(Yep, those match the MD5s of a freshly downloaded copy.)


Lorenzo Orlando Caum

  • Support Staff

April 1, 2015 at 9:40 am

Hi, you mentioned that this happens with multiple themes. Could you try deactivating and removing Event Espresso and re-installing a new copy?


Lorenzo


Ian Just

April 1, 2015 at 9:53 am

A look at the source of the page shows 87 ‘<div ‘s and 84 ‘</div’s.

My editor isn’t up to matching them as easily as it might be, but there are three question groups in there and 87-84 = 3.

The ticket selection page has a matching number of them… is it possible something’s not outputting the closing div for a question group?


Ian Just

April 1, 2015 at 9:56 am

Erm, I’d really rather not do an deactivate, delete and re-install at this stage – we’re just about to open bookings to real people.


Ian Just

April 1, 2015 at 10:11 am

Ah, I do have the new ‘Show Ticket Sale Info?’ option (thanks for that) set to ‘no’ – does that have any impact on anything?

Interestingly, looking at the source, each of the questions on each of the question groups has one more tab character at the start of the line than the previous one.


Dean

April 1, 2015 at 10:16 am

Hi,

I tested the theme with EE4.6.1 and it didn’t do this (screenshot http://take.ms/iTGte).

This suggests it’s something else that is causing this, either a modification or some sort of conflict.

It does like like a closing div is missing, that was definitely my first thought, but then it should show up on my test site and with other themes too, but it isn’t.

While I know the timing is not quite right, I would suggest testing with another theme (use the Theme Test Drive plugin, that way your customers will never know the difference).

Also you could try deactivating all other plugins except EE to see if it’s a plugin conflict somehow.


Ian Just

April 1, 2015 at 12:11 pm

I’ve done a new install on another site using the same theme, and yes it’s fine on that (although don’t have all the options quite the same on it yet.

I needed to add another question group anyway. Once that’s done, the page now has four question groups: 88 opening div’s, and 85 closing ones. So what else are there three of on the page?


Ian Just

April 1, 2015 at 3:01 pm

Ah ha! It’s the radio buttons questions.

That comes from looking at the page’s source, but if I add a radio button question to the previously fine test site, we get the drifting effect.

Source of a typical question:

<div id="ee_reg_qstn-73-phone-input-dv" class="ee-reg-qstn-input-dv">
															<label id="ee_reg_qstn-73-phone-lbl" class="ee-reg-qstn" style="" for="ee_reg_qstn[73][phone]">Phone Number</label>
														<input type="text" name="ee_reg_qstn[73][phone]" id="ee_reg_qstn-73-phone" class="ee-reg-qstn" value="" style=""/>
															
</div>
															<!-- close ee_reg_qstn-73-phone-input-dv -->

Source of a radio button question:

<div id="ee_reg_qstn-73-19-input-dv" class="ee-reg-qstn-input-dv">
														<div id="ee_reg_qstn-73-19-lbl" class="ee-reg-qstn" style="">We will contact you by email. If you have any other preferred method, please let us know. I prefer to be contacted by...</div>
															
<label for="ee_reg_qstn-73-19-phone" id="ee_reg_qstn-73-19-phone-lbl" class="ee-radio-label-after micro-lbl">
	<input id="ee_reg_qstn-73-19-phone" name="ee_reg_qstn[73][19]" class="ee-reg-qstn" style="" type="radio" value="Phone">&nbsp;Phone
</label>
<label for="ee_reg_qstn-73-19-post" id="ee_reg_qstn-73-19-post-lbl" class="ee-radio-label-after micro-lbl">
	<input id="ee_reg_qstn-73-19-post" name="ee_reg_qstn[73][19]" class="ee-reg-qstn" style="" type="radio" value="Post">&nbsp;Post
</label>
<div class="clear-float">
															
</div>
															<!-- close ee_reg_qstn-73-19-input-dv -->

.. spot the missing closing /div! And, by no coincidence, there are three radio button questions on the page.

The comments in the source helped a lot in spotting this…


Ian Just

April 1, 2015 at 3:21 pm

Note that the default questions on a new install don’t include a radio buttons question 🙂

A few greps on the plugin’s files suggests that either core/libraries/form_sections/strategies/display/EE_Radio_Button_Display_Strategy.strategy.php doesn’t set up the clear-float properly (unlikely that EEH_HTML::div fails just for that) or whatever does the radio button question section doesn’t do a final /div.

(The other thing that helped was using the better-than-the-other-editor-at-matching-opening-and-closing-tags, Atom, to look at the source.)


Lorenzo Orlando Caum

  • Support Staff

April 1, 2015 at 3:51 pm

Great troubleshooting here Ian! I was able to duplicate the issue and I’ve created a bug ticket so we can have that fixed:

http://cl.ly/image/2J122l3z1o2N


Lorenzo


Ian Just

April 17, 2015 at 2:53 am

Now fixed in 4.6.20 – thank you!

The support post ‘EE4 registration-checkout page – question groups drift to the right’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso