These forums are your way of communicating with the community of people developing and using tools provided by the OneAll platform. The forums are run by the community and moderated by the OneAll team during office hours.
Please stick to technical issues - and remember, no confidential information - these are public forums!

Moving footer link slightly to allow details to fit on smaller screen

Hi Guys,

We are using the Joomla Oneall Login alongside JF Login Pro, however the login dropdown gets cut off on smaller screens (iPhone 5) thus I have moved some of the elements in the dropdown, but cannot move the footer attribution, thus at present it sits on top of the forgotten buttons. Please see screenshot at https://ibb.co/jh6NKc. Alternatively, can the social icons be next to each other horizontally? Again, I have tried this and nothing seems to take affect.

I am not asking to remove the attribution, merely move it slightly. It seems css does not have any affect on this at all so any advice would be most welcome.

Thank you in advance.

Regards
Donna

Answers

  • Hi Donna,

    what you can do is give the container that embeds the icons a fixed height using CSS.
    If you can post a link to the corresponding page, I can also send you the CSS to use.

    Regards,

  • Apologies Claude, here is the url to the page - https://www.outyego.com/.

    Thank you in advance.
    Regards
    Donna

  • edited May 24

    Hi Donna,

    please try adding this rule to your CSS stylesheet:

    .oa_social_loginjf-login-pro-position{
     height: 120px;
    }
    
  • Hi Claude, there is something else odd going on here - it seems the iframe is getting a width of 1px on the site so the login buttons aren't actually showing at all - the code being applied to the iframe is

    border: 0px none;
        width: 1px;
        height: 100px;
        background-color: transparent;
    

    This seems to be being applied at the core level and not as a css override - this was not happening previously? Thus with this currently happening, if I uncheck the width item in dev tools the link does appear just above the button, but obviously now this 1px width is an issue. Nothing has been altered on the site for this to take effect. Can you possibly advise?

    Regards
    Donna

  • Could you please try to refresh your browser cache and check if it works now?

  • edited May 28

    Hi Claude, thank you for your response...we are back to the original issue now..

    The maximum height that the .oa_social_loginjf-login-pro-position can be to allow the full login to display with the create account option is 210px so that the oneall buttons/link do not overlap the other options. Is there anything else we can do here?

    This is for smaller phone screens i.e. iPhone 5/SE

    Regards
    Donna

  • Hello,

    I currently do not see this rule

    .oa_social_loginjf-login-pro-position{
     height: 120px;
    }
    

    Have you tried adding it? This might already fix the issues.

  • Hi Claude, this was implemented last week - please see screenshot at following link:

    https://drive.google.com/file/d/1JLFf9aI9gJ1cIqq99Bu6d8uXyc-OLGqL/view?usp=sharing

  • Hi Barry,

    could you please try to slightly change the rule? Like this:

    .oa_social_loginjf-login-pro-position {
        height: 120px;
        overflow: hidden;
    }
    
  • Hi Claude,

    Unfortunately this does not work either - the main problem at present is that the buttons to log in with FB/Twitter are only 1px wide, thus cannot be clicked on. Yes the overlap issue is still there but this is a minor issue as the buttons cannot be used at all.

    The iFrame is picking up a width of 1px - I have tried to override this in the custom.css but it is being ignored.

    oa_social_login_frame_45470 { border: 0px none; width: 1px; height: 100px; background-color: transparent; }

    This is a huge issue guys, I have mentioned it in the posts above - adjust the height of the container is not going to fix the button width - this is now 2 issues.

    Please can you advise how to get the correct button width.

    Regards
    Donna

  • edited June 14

    Hi Donna,

    I have had a closer look but I can't seem to reproduce the issue. The iFrame should automatically detect the container's size and adjust accordingly. Could you try to add the width too?

    .oa_social_loginjf-login-pro-position {
        width: 100%;
        height: 120px;
        overflow: hidden;
    }
    

    Could you also give me the exact OS/Browser that you are using? I tried on Chrome, Firefox and iPhone, but I can't reproduce it.

  • Ok. I have been able to reproduce the issue ;)

  • We have now release a hotfix that should fix this issue. Do not forget to refresh your browser's cache when testing ;)

Sign In or Register to comment.

Welcome!

Please sign in to your OneAll account to take part in the discussions.

Please click on the link below to connect to the forum with your OneAll account.