CSS fix 4 Admin menu's z-index

[SmaRTeY]

How annoyed are you with the sidebar menu's in your Osclass Admin page? I don't know about the latest version but with Osclass 3.5.6. version in Admin when having many plugins making the list bigger the list is shown 'behind' the top of the page which is annoying to say the least.

The fix is simple, in your main.css file which you can find here:

Code: [Select]

oc-admin/themes/modern/css
You need so look/search for the following CSS class: "navbar".
First hit should be this string:

Code: [Select]

navbar{padding:8px 0;width:100%;background-color:#474749;z-index:1;min-width:800px;color:#616161}
Change the z-index currently showing 1 into -1 and now all your menu's will be displayed on top and no longer behind the top page.


Regards,
Eric

[SmaRTeY]

Hi there again,

the first mentioned fix works but might not have been the best solution so I looked more and I found some JS code responsible for some 'margin-top' calculated value which actually is 'pushing' the menu behind the menu/header when in Admin.

If you changed the z-index you can undo this again and edit the file called "ui-osc.js" in the folder: /oc-admin/themes/modern/js
Comment out the code on line #9 like so:

Code: [Select]

            //$submenu.css('margin-top',((menuItemHeight-$submenu.height())/2)-10);

This makes the header 'stick' again like it originally is AND now the menu is positioned underneith the header/navbar so it is readable again.

I think this is the better solution, I have done some tests and do not see any issues so far but as always, use at own risk


Regards,
Eric

[dev101]

I missed this topic somehow. Anyway, yes, I noticed the same issue and did similar thing long time ago, but my fix and math was little different. First, position:fixed is not mobile friendly. So, the below solution is different as a result of testing on many different devices:

Code: [Select]

$submenu.css('margin-top',((menuItemHeight-$submenu.height())/4)-15);

rewritten sidebar part and fixed/relative position:

Code: [Select]

//global
$('#sidebar').css({
height: '100%',
top:0
});
var calcPaddingBtm;
if($(window).height() < (620+headerHeight)){
if($('body').hasClass('compact')){
calcHeigt = $('#content-render').height();
if(calcHeigt<620){
calcHeigt = 620;
}
$('#sidebar').css({
height: calcHeigt,
top:0
});
}
//$('#content-page').css('background-color','red');
calcPaddingBtm = 620-($('#content-render').height())+50+10;
} else {
calcPaddingBtm = $(window).height()-($('#content-render').height()-10);
//$('#content-page').css('background-color','green');
}
$('#content-page').css({paddingBottom:calcPaddingBtm});
}

main.css

Code: [Select]

body.compact #content{
margin:0;
}

#content{
position:relative;
margin:0;
background-color:#FFF;
z-index:0;
min-height:600px;
}

#sidebar{
float:left;
height:100%;
width:79px;
border-right:solid 1px #DDD;
background-color:#F3F3F3;
overflow:visible;
z-index:3;
margin-right:5px;
}

This made it more small-screen friendly. I don't recall all the main.css changes which went along this particular mod, just major ones.

Regards

[SmaRTeY]

Would be nice if we see a fix for everybody in next update dev101, can't we just put it in github?

The issue seems not that bad but it is actually very annoying and looking amaturistic in the eyes of it's users

[dev101]

Hi SmaRTeY,

the problem is that this mod would not be accepted in my opinion, along few others that were already submitted, otherwise I would make it so long time ago

Simply put, the way it is now works perfectly well on selected devices (with larger screens only).

The above modification is not perfect yet either, but I am fine with it, there are few things here and there that needs to be addressed as well, which requires a lot more changes... and that is bottom-priority task for me as always

Regards

[Aficionado]

Do you have any idea how old this problem is, i bet it is at least 2 years old, and (yes) still a problem.

 

[SmaRTeY]

.....sigh
Let's just fix it, the backend doe not have to be responsive just fully useable, two years is a shame.