CSS | Dropdown at bottom of page is cut off

Question

I have a website with a dropdown at the bottom, but when I click it to open it, it doesn't show up because (I assume) it is below the page. My two options are to have the page expand slightly when the dropdown is clicked, or to have the dropdown open upwards. link

I have tried doing:

overflow: scroll;

and

bottom: 100%

Unfortunately I can only edit the css of the website, which means I cannot add or remove elements. You also have to be logged in to see the dropdown, not much I can do about that. Feel free to create an account with a spam email or something. Sorry about that.

Which dropdown are you referring to? A screenshot here (or more details) would help. I'm not seeing anything cut off on my screen at all. — Bing, Jun 27 '18 at 21:02
@Bing Sorry about that, you have to be logged in to see it unfortunately, and I cannot change that. I provided a screenshot as you requested. Thanks! — , Jun 27 '18 at 21:06

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

i cannot see the dropdown, but you can have your dropdown showing upwards with pure css, see this question/answer

i hope it can help

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 27 '18 at 21:06

Daniel Torres Laserna

413
4
12

I've already tried that and it didn't work unfortunately. It sorta teleported the entire dropdown halfway up the screen. – Jun 27 '18 at 21:07
maybe you can play with the attribute position and bottom – Daniel Torres Laserna Jun 27 '18 at 21:10
Awesome! I had to set position to absolute and bottom to 0. Thanks! – Jun 27 '18 at 21:16
Glad to help :) – Daniel Torres Laserna Jun 27 '18 at 21:24

score 0 · Answer 2 · answered Jun 27 '18 at 21:20

I see you already picked another answer, but I might suggest trying to pop "up" instead of down.

If you simply change the .tebexDropdown { top: -52px; } you can have it appear above, instead of below. Note that you might have to make that CSS offset different based upon how many items are in the list, of course.

Also .tebexDropdown:before { border-bottom: 10px solid #bfbfbf; top: 33px } for styling.

Gives you this:

CSS | Dropdown at bottom of page is cut off

2 Answers2