Shape 5

Joomla Templates => EZ Web Hosting - Club => : IvesFilm July 07, 2014, 08:55:41 AM


: Sign Up form breaks on certain widths.
: IvesFilm July 07, 2014, 08:55:41 AM
Certain widths break the account creation form. Was able to duplicate this problem on your demo page. Any chance at a quick fix?

Normally wouldn't be a problem except..... well the iPad uses that width in portrait mode (and landscape mode that form has issues as well).

Browser is chrome

: Re: Sign Up form breaks on certain widths.
: mikenicoll July 08, 2014, 07:48:34 PM
Hello,

There's about a 1 to 5 px width where this will happen in some browsers, but not all. It's a Vertex function that moves the login and register modules from the s5 box to the mobile areas. Javascript width detections are not 100% accurate cross browser so there's a chance you'll hit a small area where it does this.

However, because tablets are a static size and the screens don?t resize this shouldn?t be an issue. You can only potentially see it when debugging on a desktop browser since those resize. I don?t know of any tablets where it?s fallen into the small px range where the issue can be seen on an actual tablet.

-Mike

: Re: Sign Up form breaks on certain widths.
: IvesFilm July 09, 2014, 07:39:12 AM
iPad vertical. A very common use case scenario.
Nexus 7 horizontal.

http://iveswebsolutions.com/Video/pixeltest.mp4

Not sure about 1 to 5px. Looks closer to 220px. Video included to show rubber banding behavior from bottom.

Internet Explorer doesnt have the rubber banding effect, but the affected pixel ranges are fairly equivalent.

: Re: Sign Up form breaks on certain widths.
: mikenicoll July 09, 2014, 07:29:50 PM
Hello,

Thanks for that update. I will have the designer take a look and release an update for the files.

-Mike

: Re: Sign Up form breaks on certain widths.
: mikenicoll July 11, 2014, 12:46:40 AM
Hello,

Please find attached the updated Template.CSS file for Joomla 3.0.

Change Log is below:

Original

:
Template.CSS - Line 1214

#cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxMiddleLeft, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxMiddleRight{
	background:none!important;}

Changed To:

:
#cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxMiddleLeft, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxMiddleRight{
	display:none!important;}

Also Added:

:
  #colorbox, #cboxOverlay, #cboxWrapper {
        overflow: visible !important;}

-Mike

: Re: Sign Up form breaks on certain widths.
: IvesFilm July 14, 2014, 08:27:08 AM
The login box is usable at this point. Would like to note the following:

This box is a particular point of pain (not just this template) on Safari. At some widths the box is really thin and narrow for no reason. And for some reason iMacs default to a ridiculous width that blow my mind, but also iPad's horizontal width as well, in fact it becomes narrower than when you hold the iPad upright.

Other templates have this issue as well. For instance, Photobox.

Overall, great work. Thanks for getting this update out.


: Re: Sign Up form breaks on certain widths.
: mikenicoll July 14, 2014, 10:06:41 PM
Hello,

In the S5 Box module settings there should be input boxes to adjust the width of the Register and Login popup boxes as well as boxes 1-10. If you increase this number it might help with the smaller screens. If you have further questions regarding the S5 Box just post in our S5 Box Forum and the script developer can assist you directly.

-Mike