Need help with layout issue
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
I having issues where this component is rendering the top bar twice only when i'm resizing to mobile.. I am not sure if this is something to do with the layout.. I'm using tailwind, here's the css
14 Replies
@Barbary Lion I having issues where this component is rendering the top bar twice only when i'm resizing to mobile.. I am not sure if this is something to do with the layout.. I'm using tailwind, here's the css
There might be 2 elements, one with the class
sm:hidden or md:hidden@Anay-208 There might be 2 elements, one with the class `sm:hidden` or `md:hidden`
Barbary LionOP
So on this component, i only have one which is the lg:hidden on my codebase. So i'm not sure if this could be a layout issue? Everything else on the page renders correctly
@Barbary Lion So on this component, i only have one which is the lg:hidden on my codebase. So i'm not sure if this could be a layout issue? Everything else on the page renders correctly
Yup, that element displays when the screen size is small. try commenting that line
@Anay-208 Yup, that element displays when the screen size is small. try commenting that line
Barbary LionOP
so i tried and seem to still be stuck... here's the code if this might be of help
if possible, share the whole code in a online code sharer
@Barbary Lion so i tried and seem to still be stuck... here's the code if this might be of help
there is lg:hidden, means the html element you are editing, would only be visible on mobile/iPad
@Anay-208 there is lg:hidden, means the html element you are editing, would only be visible on mobile/iPad
Barbary LionOP
yes, and that's what i'm aiming to acheive, i just don't want it to render twice
like this
@Barbary Lion so i tried and seem to still be stuck... here's the code if this might be of help
There might be another element in the file
Search
Dashboard in code editor, you should find 2 matchesBlue orchard bee
If this is a component, and you're using VSCode, you should use Search and type your component's name (ex: <NavBar />), that could tell you if you're rendering it twice.
You can even just search Dashboard and see if that appears in 2 different places.
Barbary LionOP
Ok, so i figured it out, but i'm still having DOM issues.. It was the fact that i'm using app/dashboard/page.js as my routing.. @ app/dashboard/layout.js .. i wasn't using the html / body tags because the debugger preferred I used a div.. Mind you, these are nested routes .. My folder structure is app/layout.js within app/ there is app/dashboard/layout.. Not sure if this is the best routing pattern using this tech, but when i reverted back to html / body brackets within the dashboard/layout.js .. it disappeared. The console is not happy, referring to only one usage which is the app/layout.js where i'm using it for the landing page.. again, temporary fix, but long term problem
@Barbary Lion Ok, so i figured it out, but i'm still having DOM issues.. It was the fact that i'm using app/dashboard/page.js as my routing.. @ app/dashboard/layout.js .. i wasn't using the html / body tags because the debugger preferred I used a div.. Mind you, these are nested routes .. My folder structure is app/layout.js within app/ there is app/dashboard/layout.. Not sure if this is the best routing pattern using this tech, but when i reverted back to html / body brackets within the dashboard/layout.js .. it disappeared. The console is not happy, referring to only one usage which is the app/layout.js where i'm using it for the landing page.. again, temporary fix, but long term problem
American Crow
Don't know if i understand it correctly but if you have 2 nested layouts both having <html> <body> tags you end up with nested <html> and <body> tags. Which is not valid html and might be the reason your debugger is mad.
If you do not want to nest layouts but rather have two separated layouts you should have a look at route groups:
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Which is basically a way to organize your app into logical segments each having its own (name) and layout
If you do not want to nest layouts but rather have two separated layouts you should have a look at route groups:
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Which is basically a way to organize your app into logical segments each having its own (name) and layout