how can i change the css width of the contextMenu

wangpengabc commented 4 years ago

$(document).ready(function() {
        $.contextMenu({
            // define which elements trigger this menu
            selector: ".selecteColor",
            className: 'context-style',
            id: "contextmenu",
            callback: function(key, options) {
                //var m = "clicked: " + options.$trigger.attr('id');
                adiv_CubeFace = document.getElementById(options.$trigger.attr('id'));

                adiv_CubeFace.style.background = key;

                cube.getAndRefreshColor();

            },
            // define the elements of the menu
            items: {
                blue: {name: "11111111", className: 'blue_style', },
                yellow: {name: "22221111", className: 'yellow_style',},
                white: {name: "33331111", className: 'white_style',},
                green: {name: "44441111", className: 'green_style',},
                orange: {name: "55551111", className: 'orange_style',},
                red: {name: "66661111", className: 'red_style',},
            }

        });

        $('.context-style').css('width', '20px');

    });

I just want to change the width of the contextMenu through $('.context-style').css('width', '20px');. But i find that it does not work. What should i do to achive that? thanks

wangpengabc commented 4 years ago

here is the screenshot of my web

patrickluethi commented 4 years ago

With $('.context-menu-root').css('width', 20); you can achieve what you want to do.

wangpengabc commented 4 years ago

Since support is so bad from the creators i will help you. With $('.context-menu-root').css('width', 20); you can achieve what you want to do.

Thanks! I did as you mentioned，but noting changed. I debug it in my chrome browser,the context-menu 's width is still 208px.

bbrala commented 4 years ago

Hia, changing the width on the root or other main menu elements will not work. The library calculates the required with from the menu elements. If you see such extra width in the menu something is applyting extra width to something in the menu. You can try and use chrome developer tools to see what is applying extra with to the .context-menu-item elements or something inside that element.

patrickluethi commented 4 years ago

I was able to change the width of my menu and works fine. If you could create a jsFiddle I might be able to help you.

wangpengabc commented 4 years ago

I was able to change the width of my menu and works fine. If you could create a jsFiddle I might be able to help you.

https://github.com/wangpengabc/cube_temp This is my github repository,you can download it and run on your own PC. Just 3files, including html, js and an icon file.
Thanks!

wangpengabc commented 4 years ago

I was able to change the width of my menu and works fine. If you could create a jsFiddle I might be able to help you.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>魔方</title>
    <style>
        .selecteColor{
            width:20px;
        }
        .blue_style > span {
            background-color: blue;
            color: blue;
        }
        .yellow_style > span {
            background-color: yellow;
            color: yellow;
        }
        .white_style > span {
            background-color: white;
            color: white;
        }
        .green_style > span {
            background-color: green;
            color: green;
        }
        .orange_style > span {
            background-color: orange;
            color: orange;
        }
        .red_style > span {
            background-color: red;
            color: red;
        }
    </style>

    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
</head>

<body style="background: #ffffff;">

<div id="mf" class="selecteColor">hello</div>

<script type="text/javascript">

    $(document).ready(function() {
        $.contextMenu({
            // define which elements trigger this menu
            selector: ".selecteColor",
            className: 'context-style',
            callback: function(key, options) {
                //var m = "clicked: " + options.$trigger.attr('id');
                adiv_CubeFace = document.getElementById(options.$trigger.attr('id'));

            },
            // define the elements of the menu
            items: {
                blue: {name: "11111111", className: 'blue_style', },
                yellow: {name: "22221111", className: 'yellow_style',},
                white: {name: "33331111", className: 'white_style',},
                green: {name: "44441111", className: 'green_style',},
                orange: {name: "55551111", className: 'orange_style',},
                red: {name: "66661111", className: 'red_style',},
            }
            // there's more, have a look at the demos and docs...
        });

        $('.context-menu-root').css('width', 100);
    });

</script>
</body>
</html>

I simplify my code，just click and show the menu at <div id="mf" class="selecteColor">hello</div>. Or may i have look of your code that how you use the contextmenu to construct a menu and change the width of it? Thanks!

smartsl commented 3 years ago

i add those in css, and it works:

.context-menu-list {
  width: 100px !important;
  min-width: 100px !important;
}

swisnl / jQuery-contextMenu

how can i change the css width of the contextMenu #710