Back to oneall.com

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

Barry_RyanBarry_Ryan
in Social Login

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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

    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,

  • Barry_RyanBarry_RyanMember

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

    Thank you in advance.
    Regards
    Donna

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    edited May 2018

    Hi Donna,

    please try adding this rule to your CSS stylesheet:

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

    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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

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

  • Barry_RyanBarry_RyanMember
    edited May 2018

    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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

    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.

  • Barry_RyanBarry_RyanMember

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

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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

    Hi Barry,

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

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

    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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    edited June 2018

    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.

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

    Similar error here:
    http://support.oneall.com/forums/discussion/6375/login-button-width-collapsed-on-modal-popup#latest

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

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

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team

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

Login to your OneAll account to add a new comment

Welcome!

Please sign in to your OneAll account to ask a new question or to contribute to the discussions.

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

Ask a question

Information

Products & Services

Categories