Playing around with adjusting the size of a div that is positioned absolutely on the right side

Snippet: http://jsfiddle.net/scottbeeson/TU6Zw/

HTML Code:

<div id="itemMap" class="shadow">
    <div class="mapHeader">List of Items</div>
    <div class="mapItem">Item 1</div>
    <div class="mapItem">Item 2</div>
    <div class="mapItem">Item 3</div>
</div>

CSS Code:

#itemMap {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 230px;
    background-color: #f9f3b7;
    border: 1px solid cornflowerblue;
    font-size: .8em;
    z-index: 10;
}

Javascript Code:

$('#itemMap').resizable({
    handles: 'w',
    minWidth: 180
});

Answer №1

Chrome compatibility issue resolved by adding a wrapper. Check out the code on http://jsfiddle.net/gUzCU/

HTML

<div id="wrap">
    <div id="itemMap" class="shadow">
        <div class="mapHeader">Open Items</div>
        <div class="mapItem">Test1</div>
        <div class="mapItem">Test2</div>
        <div class="mapItem">Test3</div>
    </div>
</div>

CSS

#wrap {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 230px;
}

#itemMap {
position: absolute;
top: 0px;
bottom: 0px;
width: 230px;
background-color: #f9f3b7;
border: 1px solid cornflowerblue;
font-size: .8em;
z-index: 10;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

Preventing Redropping: A jQuery Drag and Drop Feature to Ensure Dropped Elements Stay Put

After implementing Drag & Drop functionality using jQuery, I have encountered a specific issue. The problem: When the dropped element (drag 1) is removed from the droppable container, it reverts back to the draggable container. Subsequently, attempting to ...

What is the method for deactivating a hyperlink with CSS?

Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

How can I ensure that the image fits perfectly within the box using HTML and CSS

I'm having trouble displaying an image perfectly within my div. The image doesn't cover the entire box. Here is my code: .card-background{ background-image: url("../../../assets/imgs/back-blank.png"); border-radius: 10px; margin-top: 2%; ...

Hover effects on the navigation bar combined with an image featuring a sub navigation menu

Looking to craft a dynamic navigation bar that switches out subcategory images on hover. (subcategories come pre-loaded with images) ...

Transformation of CSS into SASS (or LESS)

Looking for recommendations on CSS to less or CSS to sass conversion tools. I've come across a couple like and , but unsure of their reliability. Any insights or recommendations on other tools would be highly appreciated. I have a sizable CSS code ba ...

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

Emphasize user-entered text using HTML and CSS

Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph. I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progres ...

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

Extending the length of the list items and their contents

Take a look at this website. I'm struggling with expanding the submenu list items in IE7. It seems that when you hover over one of the LIs under Restaurants, the green does not fill the entire line. I attempted using {width: 100%}, but it did not sol ...

What is the best method to adjust the width of the <option> tag within the <select> tag using CSS?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="s ...

Creating a custom button to perfectly fit the contours of its content with Font Awesome 5

Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button. Button: <button type='but ...

Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding; I have tried different solutions found here, but none seem to cover all my requirements; I specifically need i ...

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

Is it possible to extract the CSS path of a web element using Selenium and Python?

I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...

Highlighting the current menu item by comparing the URL and ID

Looking to make my navigation menu items active based on URL and ID, rather than href. None of the suggested solutions (like this one, this one, or this one) have worked for me. This is how my Navigation is designed: <nav id="PageNavigation"& ...