Jump to content
RossF1984

Text has moved position on Register page :(

Recommended Posts

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

registerpage.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Posted (edited)

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!

registerpage1.jpg

Edited by RossF1984

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Posted (edited)

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 by RossF1984

Share this post


Link to post
Share on other sites
Posted (edited)

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 by bsmither
  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

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 by bsmither

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...