Jump to content

How to prevent object from displaying off the screen

Recommended Posts

I have a site where I fetch a list of jobs from MYSQL and display them on the page. At the end of the row for each job I have a button that has a drop down menu, unique to the user. All this works fine, but if the lines of jobs get near the bottom of the page, the drop down menu goes off the screen and I cannot scroll up to see it. I need to make the position of the drop down menu change automatically depending on its position on the page.

Can this be done in CSS or must I now go and learn javascript?

You feedback will be most appreciated! Thank you.

I am using W3Schools drop down menu script and it works perfectly well (thank you!)

<div class="dropdown">
            <button class="dropbtn">Options</button>
                <div class="dropdown-content">
                Menu items go here

This is the CSS (from W3)

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: fixed;
    top:  1;
    background-color: #f9f9f9;
    min-width: 220px;
    overflow: auto;
    /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); */
    z-index: 1;
/* Links inside the dropdown */
.dropdown-content a {
    padding: 2px 2px;
    text-decoration: none;
    display: block;
/* specify colour of headings as opposed to line items */
.dropdown-content span {
    background-color: #0000C1;
    padding: 2px 2px;
    text-decoration: none;
    display: block;

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...