0

I am implementing SVG-edit into my website. It is designed to be full screen, but I have shrunk it to fit on my page, and changed some CSS to make this work, most importantly, putting it inside of this div.

#master_editor_container {
    position: relative;
    height: 600px;
    border: 1px solid #ccc;
    background: #ABCDEF;
}

I have a button, that when clicked, should cause flyout buttons to have it's display: none removed and appear on the screen next to the button that was clicked to activate them. The elements are on the HTML document. I have used inspect element after activating them to be sure there is no display: none applied. I have applied the highest z-element to the flyout buttons and their container. I have applied all the position relative, absolute, and fixed in several combinations to the button and it's containers. I have even used opacity: 0.9 to try to push the flyout buttons up.When I remove "position: relative", the flyout buttons are visible, but of course, svg-edit overflows the box I'm trying to contain it in.

Here is all the directly relevant CSS, however there are several moving parts. For the full HTML, see this pastebin. For the full CSS, see this pastebin. To see an example of what it should look like, see the original at the latest stable version

This is the div containing the button to activate the flyout

#tools_left {
    position: absolute;
    border-right: none;
    width: 32px;
    top: 40px;
    left: 1px;
    margin-top: -2px;
    padding-left: 2px;
    background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
    z-index: 4;
}

This is CSS applied directly to the flyout button container

.tools_flyout {
    position: absolute;
    display: none;
    cursor: pointer;
    width: 400px;
    z-index: 1;
}

This is CSS applied directly to the flyout buttons themselves

.tools_flyout .tool_button {
    float: left;
    background-color: #E8E8E8;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    height: 28px;
    width: 28px;
}

According to comments, this is necessary to keep the flyouts sized properly

.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
    padding: 2px;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    z-index: 9999;
}

Given what I'm trying to achieve and what I've tried, what might be causing these buttons not to display?

Another acceptable answer would be to suggest a way to keep svg-edit project inside of a div without using a container with "position:relative".

4

0 回答 0