jQuery-UI's resizeable negates position: fixed

Question

I am creating a sample chrome extension where I inject a small <ul> into a page. It is supposed to sit in the bottom left corner of the window, so I gave it

   position: fixed;
    bottom: 0px;
    left: 0px;

This was fine until I wanted to make the <ul> resizable. For some reason when I added jQuery-UI's resizable to the <ul> it negates fixed, so the <ul> is stuck to the bottom of the whole page instead of the window. How can I fix this?

Please note I have tried the accept solution here, but when I tried it, while the box did stay in the window, when I tried to resize it the whole thing floats up as the size increases. For some reason it ties top and height together so they will both change on resize.

manifest.json:

{
    "name": "injection",
    "description": "samples at code injection",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [ "<all_urls>"],
            "css":["style.css", "jquery-ui.css"],
            "js":["jquery-2.1.0.min.js", "resize.js", "jquery-ui.min.js"]
        }
    ],
    "permissions": [ "http://127.0.0.1:8000/", "<all_urls>", "storage", "tabs" ]
}

resize.js:

$(function() {
    var container = $("<ul />", { class: "container_t" });
            container.resizable({ handles: "n" });
            var header = $("<li />", { class: "header_t" });
            var content_container = $("<li />", { class: "content_container_t" });
        container.append(header);
        container.append(content_container);
    $('body').append(container);
});

style.css:

.container_t {
    position: fixed;
    bottom: 0px;
    left: 0px;
    list-style: none;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

score 0 · Accepted Answer · edited May 23 '17 at 10:26

As I said the solution here, wasn't perfect for me, but it was close. I had to take out bottom: 0; from the new container I added and swapped it for top: 80% !important; The code looks like this:

resize.js:

$(function() {
    var resize_container = $("<span />", {class: "resize_container"});
        var container = $("<ul />", { class: "container_t" });
                container.resizable({ handles: "n" });
                var header = $("<li />", { class: "header_t" });
                var content_container = $("<li />", { class: "content_container_t" });
            container.append(header);
            container.append(content_container);
        resize_container.append(container);
    $('body').append(resize_container);
});

style.css:

.resize_container {
    position: fixed !important;
    top: 79% !important;
    left: 0px !important;
}

.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

ui-resizable-e {
    cursor: e-resize;    
    border-right: 5px solid purple;
}

jQuery-UI's resizeable negates position: fixed

1 Answers1