Skip to content
Sudonix

Why CSS acts different in Desktop?

Bugs
11 3 2.4k 1
  • Pandaundefined

    Disclaimer, I’m not a CSS fan. But others on this site are more CSS aware, so I ask this general question.
    The Admin side panel on NodeBB vanishes in Desktop mode on mobile. What could be happening to cause that?

    Its an issue Ive raised on NodeBB site a few times now but its one of those topics that has been ignored.
    I thought if I could propose why this is happening, it might help get a fix.
    I dont see why it would be so different. Admin side panel works on Desktop, and on mobile (mobile view), so why not mobile (Desktop view)?

    0
  • Pandaundefined Panda

    Disclaimer, I’m not a CSS fan. But others on this site are more CSS aware, so I ask this general question.
    The Admin side panel on NodeBB vanishes in Desktop mode on mobile. What could be happening to cause that?

    Its an issue Ive raised on NodeBB site a few times now but its one of those topics that has been ignored.
    I thought if I could propose why this is happening, it might help get a fix.
    I dont see why it would be so different. Admin side panel works on Desktop, and on mobile (mobile view), so why not mobile (Desktop view)?

    phenomlabundefined

    @Panda What theme are you using? I’m not familiar with a side panel in the admin console. Can you provide a screenshot?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • Pandaundefined

    It happens in all themes, if you go into Admin, then click the top left menu (3 lines button) the side panel extends out but is blank

    Screenshot_20230622_174252_Chrome.jpg

    0
  • Pandaundefined Panda

    It happens in all themes, if you go into Admin, then click the top left menu (3 lines button) the side panel extends out but is blank

    Screenshot_20230622_174252_Chrome.jpg

    phenomlabundefined

    @Panda Sorry - understood now - but why would you want to use Desktop Mode on a mobile ?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • phenomlabundefined phenomlab

    @Panda Sorry - understood now - but why would you want to use Desktop Mode on a mobile ?

    Pandaundefined

    @phenomlab
    2 situations-
    i) as my tablet defaults to it
    ii) some things cant be altered in Admin, on mobile in mobile view 😞

    That aside, why should panel be blanks just because of the browser view?
    Its quite an annoying bug, if you ever need to do any admining on the move!

    Out of interest, can you replicate this bug? Im wondering if it happens on iPhones too, I only have Android

    phenomlabundefined 2 Replies
    0
  • Pandaundefined Panda

    @phenomlab
    2 situations-
    i) as my tablet defaults to it
    ii) some things cant be altered in Admin, on mobile in mobile view 😞

    That aside, why should panel be blanks just because of the browser view?
    Its quite an annoying bug, if you ever need to do any admining on the move!

    Out of interest, can you replicate this bug? Im wondering if it happens on iPhones too, I only have Android

    phenomlabundefined

    @Panda You make some good points here - I too often need to make changes on the move, but just “accepted” thaty some things (like widgets) can’t be manipulated on mobile devices.

    WordPress has always been like that incidentally.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    1
  • Pandaundefined Panda

    @phenomlab
    2 situations-
    i) as my tablet defaults to it
    ii) some things cant be altered in Admin, on mobile in mobile view 😞

    That aside, why should panel be blanks just because of the browser view?
    Its quite an annoying bug, if you ever need to do any admining on the move!

    Out of interest, can you replicate this bug? Im wondering if it happens on iPhones too, I only have Android

    phenomlabundefined

    @Panda said in Why CSS acts different in Desktop?:

    Out of interest, can you replicate this bug? Im wondering if it happens on iPhones too, I only have Android

    Yes, I am able to replicate on Android, but on an iPhone, it behaves differently in the sense that you request the desktop site, but it simply defaults to mobile.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    Yep better to use ACP on Desktop. Not a bug., It is not made to be used on Mobile

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    Yep better to use ACP on Desktop. Not a bug., It is not made to be used on Mobile

    phenomlabundefined

    @DownPW it works for the most part, but anything that utilizes drag and drop like widgets is a non starter.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    1
  • DownPWundefined

    Yes sure, in landscape mode, it’s manageable but I think it’s more of a bonus than anything else.

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    Yes sure, in landscape mode, it’s manageable but I think it’s more of a bonus than anything else.

    phenomlabundefined

    @DownPW I’d have to agree with that.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
Log in to reply

Related Topics
  • phenomlabundefined

    Planned sunset of NTFY plugin

    Pinned Announcements push nodebb ntfy
    7
    1
    8 Votes
    7 Posts
    2k Views
    phenomlabundefined
    I’ve noticed that I’m the only one subscribed to the push notifications on this site. If you were using NTFY previously, and have noticed that you’ve not had any alerts for a while, it’s because this feature has been disabled. You’ll now need to use the push notification to replace NTFY as mentioned in the first post.
  • DownPWundefined

    Glitch effect when refreshing the home page

    Customisation javascript nodebb customisation glitch effect
    17
    14 Votes
    17 Posts
    3k Views
    DownPWundefined
    No problem dude ! I hope you have a good vacation. Enjoy your loved ones!
  • ahmedundefined

    nodebb error logs

    Bugs nodebb
    6
    2
    4 Votes
    6 Posts
    1k Views
    ahmedundefined
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • mventuresundefined

    NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    2k Views
    mventuresundefined
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • mventuresundefined

    NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    949 Views
    phenomlabundefined
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    93k Views
    DownPWundefined
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • DownPWundefined

    [NODEBB] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    7k Views
    DownPWundefined
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • JACundefined

    [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    2k Views
    JACundefined
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed