Text has moved position on Register page :(

[RossF1984]

Hi all,

I have made a change to a text string within 'Languages > Phrases within the customers account'

The string I changed is:
"register_terms_agree_link"

The problem I am having is now that the string is longer it drops the text down from beside the box (See attached *.jpg) as it should be. I assume that this is due the column size being fixed on this form?

Could anyone advise as to how to make it wider so that the text does not drop down? I have attempted to use the Inspect feature on Firefox but am unable to fathom it out.

Kind regards,

Ross

[Al Brookbanks]

Maybe float it right at the end so it shows to the right of the page at the end if the text. Just add a class "right" to the input checkbox. That should do it.

[RossF1984]

Thanks @Al Brookbanks for the rapid repsonse. Sorry for sounding thick but do you know which file would I need to make this edit to? Would it be content.register.php.
I have found this in there:

<div class="row">
      <div class="small-12 large-8 columns"><span id="error_terms_agree"><input type="checkbox" id="terms" name="terms_agree" value="1" {$TERMS_CONDITIONS_CHECKED} rel="error_terms_agree"><label for="terms">{$LANG.account.register_terms_agree_link|replace:'%s':{$TERMS_CONDITIONS}}</label></span></div>
   </div>

I added right to the class after the word columns (so class="small-12 large-8 columns right) and the attached was the result.

Apologies, I am attempting to learn as I go which involves a lot of questions and guess work!

Edited April 24, 2020 by RossF1984

[Al Brookbanks]

Well... This is exactly how I learned. If you are interested you'll nail it.

 

[bsmither]

Please try this:

In the Foundation template content.register.php, near line 45, find:

<div class="small-12 large-8 columns"><span id="error_terms_agree"><input type="checkbox" id="terms" name="terms_agree" value="1" {$TERMS_CONDITIONS_CHECKED} rel="error_terms_agree"><label for="terms">{$LANG.account.register_terms_agree_link|replace:'%s':{$TERMS_CONDITIONS}}</label></span></div>

Change to:

<div class="small-12 large-8 columns" id="error_terms_agree" style="display:flex; align-items:baseline;"><input type="checkbox" id="terms" name="terms_agree" value="1" {$TERMS_CONDITIONS_CHECKED} rel="error_terms_agree"><label for="terms">{$LANG.account.register_terms_agree_link|replace:'%s':{$TERMS_CONDITIONS}}</label></div>

This may affect validation. Please verify.

A similar edit may be applicable in the checkout process.

[RossF1984]

Thanks!

I will give this a go. I managed to create a temporary solution that looks a little better than it did previously. But this involves putting the text string back to the original and then placing a statement below the Terms & Conditions statement.

What do you mean by "may affect validation"? That the registration process may not complete correctly?

Edited April 24, 2020 by RossF1984

[bsmither]

The form elements are passed through a "form validator". The validator checks for things like:
something was entered,
if entered, does it look like it is supposed to--
-- phone numbers - only digits
-- email - proper syntax and does it already exist (ajax call)
-- password must meet complexity level
-- confirm password must match password
-- T&C box checked

The validator, if something fails the validation rules, will tell the browser where to show an error banner.

The original HTML statement said: for the T&C checkbox, find the HTML with the same id as the this tag's rel attribute. The tag with the matching id attribute was the <span> tag just removed.

The <span> tag was causing an inability to properly identify the box's children within the contents of the flex box.

So, now that the <div columns> tag has this id attribute, where would the error banner get shown? I haven't tested that.

Edited April 24, 2020 by bsmither

[RossF1984]

Thanks for the explanation.

[bsmither]

Actually, I'm now finding that applying the flex style to the span works just as well.

Oh well.

But, since there isn't a matching span on the following checkbox, probably better to apply the flex style to the <div columns> for all the checkboxes.

Edited April 24, 2020 by bsmither