Stop div from exceeding the page boundaries

Question

Stop div from exceeding the page boundaries

Here's my current dilemma:

I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I'm facing is that when viewing the menu on smaller windows, a horizontal scrollbar appears after hovering over the element. How can I prevent this? Is there a way to make the menu box appear on the left side in such situations?

The code for my existing menu is straightforward:

<ul><li>Hover me 
<ul><li>Hovered element</li>
<li>Hovered element 2</li></ul>
</ul>

And the CSS looks something like this:

ul > li > ul {display:none}
ul > li:hover > ul {display:block}

In addition to other styles. Is there a jQuery script or CSS trick available to address this issue?

jquery css tooltip

Answer 1

Answer №1

Exciting news! I've finally discovered a solution using PURE CSS. By utilizing the word-wrap property, you can easily achieve your desired outcome. Below is the revised CSS code:

ul > li > ul {
    display:none;
}
ul > li:hover > ul {
    margin-left:-15px;
    word-wrap: break-word;    
    display:block;
}

See it in action here:http://jsfiddle.net/p7wzv57j/

Answer 2

Exciting news! I've finally discovered a solution using PURE CSS. By utilizing the word-wrap property, you can easily achieve your desired outcome. Below is the revised CSS code:

ul > li > ul {
    display:none;
}
ul > li:hover > ul {
    margin-left:-15px;
    word-wrap: break-word;    
    display:block;
}

See it in action here:http://jsfiddle.net/p7wzv57j/

Answer 3

Answer №2

One important step is to utilize Media Queries in your CSS. By determining the screen size where the behavior occurs, you can then adjust the settings accordingly.

Here is an example:

Your regular CSS definition :

.reframe {
 //Your Settings
}


@media screen and (min-width: 760px) {
    .reframe { //your new settings }
}

Answer 4

One important step is to utilize Media Queries in your CSS. By determining the screen size where the behavior occurs, you can then adjust the settings accordingly.

Here is an example:

Your regular CSS definition :

.reframe {
 //Your Settings
}


@media screen and (min-width: 760px) {
    .reframe { //your new settings }
}

Answer 5

Answer №3

In a similar scenario that I experienced, the messages were generated through JavaScript. To address this issue, I utilized the element's offset at the time of inception to determine its distance from the right side of the screen. Subsequently, I assigned it a unique class with distinct styling.

If JavaScript is not an option, one potential solution could involve utilizing media queries for global modifications. Creating separate classes like .left and .right could allow for explicit customization based on positioning.

Answer 6

In a similar scenario that I experienced, the messages were generated through JavaScript. To address this issue, I utilized the element's offset at the time of inception to determine its distance from the right side of the screen. Subsequently, I assigned it a unique class with distinct styling.

If JavaScript is not an option, one potential solution could involve utilizing media queries for global modifications. Creating separate classes like .left and .right could allow for explicit customization based on positioning.

Stop div from exceeding the page boundaries

Answer №1

Answer №2

Answer №3

Similar questions

AgGrid's magical dropdown feature

Moving between different perspectives within a single-page backbone application

JSON isn't transmitting any information

Is it possible to send an entire HTML table to the server and then update the database table with it?

Interact with an external JavaScript function using a button within a web application

Safari experiencing a CSS issue not found in Chrome or Firefox

jquery-powered scrollable content container

Having difficulty toggling a <div> element with jQuery

Utilize Google Spreadsheet to choose a specific worksheet using JSONP

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

What sets Ext JS apart from alternatives such as jQuery and Mootools?

Implementing Pagination for a JSON Object using Javascript and Jquery

What is the best way to integrate HybridAuth using an AJAX request?

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

Having difficulty comprehending the syntax of Linear Gradients

Learn the steps to initiate a Vimeo video by simply clicking on an image

New feature in jQuery inputmask enables placeholder text to be retained

When a user clicks on a button using jQuery AJAX, it sends a number to a PHP file. I require jQuery to transmit

Define the content and appearance of the TD element located at the x (column) and y (row) coordinates within a table

Vertical centering menu adjustment