Jump to content

How to prevent object from displaying off the screen


DLR

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
                </div>
            </div>

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;
    /*right:50px;*/
    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;
    color:#FFFFFF;
    font-weight:bold;
    padding: 2px 2px;
    text-align:center;
    text-decoration: none;
    display: block;
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...