Header prevents access to top tabs and login fields on ipad

Strumelia
@strumelia
8 years ago
3,605 posts

My moderator just told me that for the past couple weeks she's been unable to log in from her iPad Mini.
I just checked this out on my own iPad Mini and see the same issue- both in Safari and on Chrome, regardless of holding the pad horiz or vertical etc. It's the same on both my jr6 sites. I do NOT have the problem on my Android phone though. Sorry I don't have other mobile devices to test it on.

This was not a problem a few months ago, and I don't know exactly when/why it happened. I did update to jr6 today on my one live site, but the moderater said this has been happening for her for a couple weeks already. She accesses my site almost always from her iPad mini.

Please forgive this LAME video but it shows the problem better than a long typed explanation ever could. I tried to edit it but Youtube editing tools don't seem to be working tonight either... (d'Oh!) :
login prob on ipad mini

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 04/18/17 04:49:14PM

@michael
8 years ago
7,799 posts

The problem is the header section is over the top of the page. The ipad min doesnt understand that its there.

The solution is to add a margin the height of the header image to the top of the main section of the page.

I dont have an ipad mini to test on, but the solution is going to be adding a

 margin-top: 70px;

to the #wrapper css class that exists in your mobile only .css file.

something like:

#wrapper {
 margin-top: 70px; 
}

to force the page to start below the height of the header on mobile devices.

If thats not enough info to try some ideas out and check if they work, I can get setup to give more specific ideas.

let me know.

Strumelia
@strumelia
8 years ago
3,605 posts

Thanks Michael, I can give this a try!

But- Can I do this via the ACP css settings?- if so where, in my active skin?
OR- do I need to do it via FTP on my server?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Strumelia
@strumelia
8 years ago
3,605 posts

In my active skin, I see the
tablet_core.css
which has:

#wrapper {
    background-color:#C9D0CE !important;
    font-size:13px !important;
}

...which I could alter via ftp.

OR
in my skin's STYLE tab, there is mobile_core.css
which has the following settings currently as seen in the following screenshot, which I can change right there:

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
8 years ago
7,799 posts

either of those should work.

Just make sure to clear the caches out after you do either.

Strumelia
@strumelia
8 years ago
3,605 posts

Ok, so on my jr6 sites, last night I made a few trials of adding the "margin top 70px" code snippet in my active (customized from ningja) skin: I experimented in doing this in both my mobile_core.css and my tablet_core.css files in my active skin (I'm assuming that's where this needs to be changed).
I got mostly no results, but when I did get results it simply added more space above the header...but still the top tabs and login window etc remained stuck BEHIND the banner and were still not accessible. I undid the tests I made.
This issue is happening on both my jr6 sites, on iPads but not on Android phones...and i see it in Safari and Chrome but have not looked at other browsers- I assume they all show it. As I show in my video in my prior post, it prevents members from logging in on ipads, and also keeps folks from accessing upper TABS, such as on their profile pages.

I'm stuck. Maybe you can tell me more specifically what code to add and in which .css file, please?
Here is what I have in my two files (note that there's a scrollbar to see both codes in their entirety)...first my mobile_core.css, and secondly my tablet_core.css :

mobile_core.css:

/* Mobile */
@media handheld, only screen and (max-width: 767px) {

    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 10px;
        -webkit-text-size-adjust: none;
    }

    h1 {
        font-size: 14px;
        font-weight: bold;
    }

    h2 {
        font-size: 13px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 11px;
    }

    input[type=submit], input[type=reset], input[type=button] {
        -webkit-appearance: none;
    }

    .ioutline, .iloutline {
        border-width: 0;
        margin: 0;
        padding: 1px;
    }

    #wrapper {
        margin: 0;
        padding: 0;
        padding-top: 48px;
    }

    #content {
        margin-top: 0 !important;
        margin: 0;
        padding: 0;
    }

    #header {
        position: inherit;
        background-image: none;
        margin-bottom: 0;
        height: 45px !important;
        padding: 3px 0;
        z-index: auto;
    }

    #main_logo {
        background-color: #333333;
        text-align: center;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .banner {
        display: none;
    }

    #mmt {
        background-color:transparent;
        position: relative;
        float: left;
        width: 28px;
        height: 28px;
        top: 6px;
        left: 6px;
        z-index: 50;
    }

    #main_menu {
        padding: 6px;
        text-align: center;
        font-size: 14px;
    }

    .rslides {
        height: 300px;
    }

    .rslides_tabs {
        width: auto !important;
        padding: 6px;
        margin: 0;
    }

    .rslides li {
        height: 300px;
    }

    #footer {
        margin: 0;
        padding: 0;
    }

    #footer_logo img {
        display: none;
        padding: 0;
        margin: 0;
    }

    #footer_text {
        text-align: center;
        padding: 0 12px;
        margin-bottom: 24px;
        font-size: 11px;
    }

    .row, .container {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .row .col1, .row .col2, .row .col3, .row .col4, .row .col5, .row .col6, .row .col7, .row .col8, .row .col9, .row .col10, .row .col11, .row .col12 {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .block {
        font-size: 12px;
    }

    #item-list {
        background: #CCCCCC;
        height: 86px;
        overflow: scroll;
        overflow-y: scroll;
        border: 3px solid #222222;
    }

    #item-holder {
        margin-right: 0;
    }

    .page_content {
        width: 100%;
        margin: 0 auto;
    }

    .page_banner_box {
        background-color: #FFFFFF;
    }

    .page_banner {
        margin-bottom: 6px;
    }

    /* @title Page Banner Icon */
    /* @help The Page Banner Icon section is the small section at the top of pages where the module icon appears */
    .page_banner_icon {
        padding: 0;
        margin: 0;
    }

    .page_banner_icon img {
        display: none;
    }

    .page_banner_left {
        text-align: left;
        background-color: #EDEDED;
        padding: 3px 9px;
        font-size: 12px;
        font-weight: bold;
        text-transform: capitalize;
        white-space: nowrap;
    }

    .page_banner_right {
        background-color: #EDEDED;
        padding: 6px 12px;
        text-align: right;
    }

    .page_table_header {
        font-size: 8px;
    }

    .page_table_cell {
        padding: 2px;
        font-size: 8px;
    }

    .nowrap {
        white-space: normal;
    }

    .element_left {
        padding: 3px;
        font-size: 11px;
    }

    .element_right {
        font-size: 10px;
        padding: 3px;
    }

    .profile_image_element_right img {
        width: 190px;
        text-align: center;
    }

    .profile_menu_entry {
        padding: 8px;
        margin-bottom: 3px;
    }

    .profile_name_box {
        height: 40px;
        padding: 6px;
        margin: 0;
    }

    .profile_name {
        display:inline-block;
        margin: 3px;
        font-size: 22px;
    }

    .profile_menu {
        padding: 0 0 0 5px;
        margin: 0;
    }

    #profile_select_menu {
        margin: 12px 12px 6px 12px;
        width: 90%;
        padding: 3px;
        font-size: 18px;
        color: #000000;
        text-transform: capitalize;
    }

    .block {
        padding: 6px;
        margin: 0;
    }

    .title {
        padding: 6px;
        min-height: 40px;
    }

    .title h1 {
        display: inline-block;
        font-size: 18px;
        margin-top: 9px;
        padding: 0;
    }

    .breadcrumbs {
        display: none;
    }

    .form_button {
        font: bold 10px Verdana, sans-serif;
        padding: 0 6px;
        margin: 0;
    }

    .form_select_item_jumper {
        width: 50%;
    }

    .upload_button {
        font: bold 10px Verdana, sans-serif;
        height: 20px;
        padding: 6px 6px 0 6px;
        margin: 0;
    }

    .create_img {
        height: 20px;
        width: 20px;
    }

    .update_img {
        height: 20px;
        width: 20px;
    }

    .delete_img {
        height: 20px;
        width: 20px;
    }

    .download_img {
        height: 20px;
        width: 20px;
    }

    .img-profile {
        max-width:250px;
        max-height:250px;
        margin: 4px auto;
    }

    /* Tab Bar */
    .page_tab_bar_holder {
        width: 100%;
        background: #FFFFFF;
        border-bottom: 0;
        padding: 0 12px 9px 0;
    }

    .page_tab_bar_spacer {
        height: 0;
        background-color: #FFFFFF;
    }

    .page_tab {
        background: #DDDDDD;
        float: left;
        list-style: none;
        margin: 3px 6px 3px 0;
        color: #000000;
        text-transform: capitalize;
        font-size: 12px;
        padding: 3px;
        text-align: center;
        border-radius: 0;
    }

    .page_tab a {
        color: #000000;
        text-decoration: none;
    }

    .page_tab_first {
        margin-left: 0;
    }

    .page_tab_last {
        background: #DDDDDD;
        color: #000000;
    }

    .page_tab_active {
        background: #444444;
        color: #FFFFFF;
        border: 0;
    }

    .page_tab_active a {
        color: #FFFFFF;
    }

    .info_img {
        display: none;
    }

    .gallery_img {
        width: 100%;
    }

    .item {
        padding: 6px;
        font-size: 12px;
    }

    #action_text {
        width: 95%;
    }

    .action_item_holder {
        text-align: left;
        display: inline-block;
    }

    .action_item_desc {
        font-size: 10px;
    }

    .action_item_user_img {
        display: none;
    }

    #action_networks {
        display: none;
    }

    .action_item {
        width: 100%;
        font-size: 11px;
        overflow: auto;
        clear: both;
    }

    .action_item_date {
        clear: both;
        float: none;
        text-align: left;
        font-size: 8px;
        font-style: italic;
        margin: 6px 0 0 0;
    }

    .action_item_user_img {
        margin: 0 9px 0 0;
        width: 32px;
        height: 32px;
    }

    .action_media_thumb {
        display: inline-block;
    }

    .action_media_thumb img {
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    .left {
        font-size: 10px;
    }

    .right {
        font-size: 10px;
    }

    .form_text_search {
        width: 33%;
    }

    .ds_browser_key {
        width: auto;
    }

    #ds_browser_new_key {
        width: 80px;
    }

    .CodeMirror {
        width: 30% !important;
    }

    /* Scroll Up Icon */
    .scrollup{
        bottom:10px;
        right:10px;
    }
}

tablet_core.css:

/* Tablets */
@media only screen and (max-width: 1025px) {

    input[type=submit], input[type=reset], input[type=button] {
        -webkit-appearance: none;
    }

    .page_tab {
        font-size: 14px;
    }

    .page_section_header {
        border-bottom: 0;
        margin-bottom: 9px;
    }


    #header {
        height: 115px !important;
    }

    #content {
        margin-top: 20px !important;
    }

    #menu_content {
        padding: 12px 0 !important;
    }

    #menu a {
        padding: 3px 6px !important;
    }

}

@media only screen and (max-width: 900px) {

    #main_logo a img {
        width: 189px !important;
        height: 51px !important;
    } 
}

Thank you for your help!

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/03/17 01:03:08PM

@michael
8 years ago
7,799 posts

if its working on android, but not on ipad then its a browser quirk that needs to be played with. I dont have either an ipad or an android device to test with sorry, so cant say for sure what will work.

You can see at the top of both those files there is a line that looks like this:

@media only screen and (max-width: 1025px) {

that wraps all the code beneath it. That line is saying if the screen size is smaller than this, then use this CSS.

What you need to do is figure out what section is firing, then add your code in there.

Anyone got an iPad they don't want? I'll try to locate one.

Strumelia
@strumelia
8 years ago
3,605 posts

I'm afraid I', still having this issue, and I have more members contacting me that they can't log in on their tablets (iPads so far). I've asked them and they are using Safari but I see the same issue on both Safari and Chrome on my iPad Mini.
I think this is happening on tablets but not on phones, because the phones have their own 'hamburger' menu that isn't getting aggressively covered up by the header.
I tried the suggested CSS tweaks above, but could not get it fixed that way, so I removed what I did and am square one again.
Sorry, but I don't know how to proceed from here

Maybe can other JR6 users test this on their iPads by logging out and then in again, to provide more clues as to whether this is widespread beyond just me?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Strumelia
@strumelia
8 years ago
3,605 posts

Update: got same report just now from a member who's on a Dell Android tablet using Firefox.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@douglas
8 years ago
2,804 posts

In your mobile_core.css file, try changing the header position to static instead of inherit...

#header {
        position: static;

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 01/11/17 08:51:25AM

Strumelia
@strumelia
8 years ago
3,605 posts

Ok thanks Doug,...but that only applies a hamburger (phone-like) menu to tablets, which is not what I want- plus it doesn't stop the top of pages and what's on them from continually sliding under the header, making stuff like top tabs on profile pages inaccessible...like on my video at top of this thread. I removed the 'static' fix now.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@douglas
8 years ago
2,804 posts

If I recall correctly, your using a clone of the ningja/ninja skin, there is a spacer class used for the desktop, try adding it to your mobile_core or tablet_core CSS files and add more space, it looks like this:

.spacer {
    padding-top: 75px;
}

Try changing 75px to 125px and see if that helps any.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Strumelia
@strumelia
8 years ago
3,605 posts

Douglas, I found the following code:

.spacer {
    padding-top: 105px;
}

in my active (custom ninja-based) skin and I put it just like that in what looked like a logical spot in each of my mobile_core or tablet_core CSS files one at a time, integ check etc...but saw no change on my iPad, sorry. I've set it back again.
Do you think maybe one of those ! important mentions in my tablet css code I posted (see way above) might be overriding things?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@douglas
8 years ago
2,804 posts

Okay, in your table_core.css file, try changing this:

    #header {
        height: 115px !important;
    }

to this:

    #header {
        height: 115px !important;
        position: inherit;
    }

See if that fixes it.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Strumelia
@strumelia
8 years ago
3,605 posts

Douglas-

YES!!! THAT WORKED!!!!

Wow thank you so much- this has been driving me nuts trying to help members who coudln't log in... whew what a relief.

THANK YOU SO MUCH!!! woo-hooooo...

:D :D

....and my moderator just reported back to me that she can now log in successfully on her iPad. :D :D

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/11/17 03:29:43PM

@douglas
8 years ago
2,804 posts

Glad that sorted it for you.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

solved Header prevents access to top tabs and login fields on ipad