Modal appears under the navbar

[aurelieverrot]

Describe the bug

The modal triggered by the three dots on the left of an article appears stuck under the navbar of the website, it is not readable entirely.

To Reproduce

After submitting an article but before publishing.
Click on the three dots on the top left of the article.
The modal will show up but a part of it is hidden behind the navbar

Expected behavior

The modal should appear entirely to see all the links. It can appear under the navbar, or on top of it.

Screenshots

Desktop (please complete the following information):

• OS, version: MacOS Catalina 10.15.7
• Browser, version: Chrome Version 88.0.4324.192 (Official Build) (x86_64)

Additional context
button id="article-show-more-button"

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[Link2Twenty]

Adding z-index 100 to crayons-layout__sidebar-left would fix the overlay issue (though the dropdown still goes off the screen) but I think there should be logic added to crayons-dropdown to detect if the element goes off screen and reposition it accordingly.

[nickytonline]

Related to this issue is the member navigation menu renders under banners.

The banner has a z-index: 100;, whereas the member menu has a z-index: 400;. This leads me to believe it's not just a z-index issue but also relates to stacking contexts.

[jgaskins]

@nickytonline I think you're right. The popover has z-index: 100, but its great-grandparent element has z-index: 1.

If I'm reading the link you posted correctly, it looks like the z-index of the descendant element is relative only to other elements underneath the ancestor with a z-index, which very much seems to align with what's going on here, and when I manually set the z-index of the ancestor element to something higher than that of the header (which I believe is what @Link2Twenty was pointing out) it does work.

[cmgorton]

Great! Assigning it to you now. Thanks for helping out. let us know if you have any questions!

[noviicee]

I cannot find the file to which the changes are to be made. Can anybody help me..?
I believe I can do this one.

[msarit]

@noviicee Hey Anamika! 👋🏾

Instead of just answering your question, I thought it might be helpful to show you how I went about finding the relevant page(s).

Here is the video: https://www.loom.com/share/616d4af69fb84ebe8d7f25c2ddb3b809

Please reach out to us if you need more support. Thank you for contributing to Forem! ❤️

PS: the file I identified in the video is app/views/articles/show.html.erb

cc: @cmgorton

[noviicee]

@noviicee Hey Anamika! 👋🏾

Instead of just answering your question, I thought it might be helpful to show you how I went about finding the relevant page(s).

Here is the video: https://www.loom.com/share/616d4af69fb84ebe8d7f25c2ddb3b809

Please reach out to us if you need more support. Thank you for contributing to Forem! ❤️

PS: the file I identified in the video is app/views/articles/show.html.erb

cc: @cmgorton

Hey! Thanks a lot!
Up to it!! 🚀

[noviicee]

I am able to setup forem locally on my machine. But, I am unable to login to the local dev.to. What needs to be done in this case..?
I am using ubuntu 20.04 and on using github to login to Dev(local), It redirects to: here

[rhymes]

@noviicee by inspecting the link I think what's missing is the correct setup of the GitHub credentials in the .env file.

You can find the necessary details here: https://docs.forem.com/backend/auth-github/

[noviicee]

@noviicee by inspecting the link I think what's missing is the correct setup of the GitHub credentials in the .env file.

You can find the necessary details here: https://docs.forem.com/backend/auth-github/

okay. Trying to do that!

[noviicee]

@noviicee by inspecting the link I think what's missing is the correct setup of the GitHub credentials in the .env file.
You can find the necessary details here: https://docs.forem.com/backend/auth-github/

okay. Trying to do that!

I did that and it's still the same. I added the client id and client key in the .env file as mentioned, re-run the container setup, just in case it was needed, but still not able to login.
Btw, I am running Forem with Docker via docker-compose -> link

And yes, the hommepage of local-dev is displaying a message like - Setup not completed yet, missing community description, suggested tags, and suggested users. Please visit the configuration page.

On visiting the configuration page, I see something like this

What exactly do I need to add in here..?

[maestromac]

@noviicee do you mind wiping your database and try signing up again and let us know the exact error you are seeing?

[veerreshr]

Hello, If someone is not working on this, I would like to work on this.
This is what I have analyzed:

1. This is only occurring for device sizes with resolution more than 768px width
2. One fix could be to show dropdown in the downward direction for devices width more than 768px

I have added 2 utility classes(not custom css) to the element's class, this is how its looking on making the dropdown downwards

Few alternative ways I could apply the fix

• Make dropdown work same way for both draft page and non draft article view
• Make the changes only to draft view and let non draft view appear the same as before

If changes are only for draft page, this is how it could look (just change in position of modal):

If we apply dropdown changes to even non draft pages, this is how it may look

I need a confirmation on which alternate way should I proceed if given a chance to work on this issue.

[cmgorton]

Thank you for offering to work on this @veerreshr and all of your great suggestions. We are asking our product team their thoughts on your suggestions and will let you know which one they think you should go with.

[cmgorton]

@veerreshr I am going to assign you to this issue. Our product team said they like the solution you have proposed. And out of the options they "think the left-most solution works for what should be accomplished here".

[veerreshr]

Hey I am having trouble setting up forem locally. I am using Ubuntu 20.04.2 LTS and I tried setting up using docker compose.
Error is something related to authorizing the admin, I am not sure what to do here, could some one help me in setting up.

[jgaskins]

@veerreshr If you're able to bring up a Rails console, you can run User.first.add_role(:super_admin) to give your user account access to everything

[veerreshr]

thanks @jgaskins , Now I am able to set it up and running. Now I am left with few more douts? should I implement the feature so it only effects the draft page. What I mean is, the dropdown is common for both draft articles and non draft articles, so if I change the dropdown layout, it will change for both draft and non draft articles. Should I change it only for draft pages(can be achieved with a small tweak)? or for both?

This is how it looks when changes are applied to both draft and non draft articles
Draft Article :

Non Draft Article:

Should I proceed to apply changes for both the pages? or just for draft page? and sorry if I am asking too many questions 😅.

[veerreshr]

@cmgorton @rhymes please look into the above confusion

[rhymes]

@veerreshr I think it's necessary for both! I don't think there's a distinction in the CSS between the two types of posts