Change default width of jquery dialog popup in CSHML?

I was able to change it by adding the width property in the options:

@page
@model Products.Pages.IndexModel
@{
}
<br />
<br />
<div id="productsContainer">
    <button class="openProductModal"> <img src="~/images/logo/Product.png" alt="Product Image" width="200" style="padding: 10px">
    </button>

</div>
<br />

<div id="modal_dialog" style="width: 1000px; border: 1px solid red;display: none">
    <div>
        Ready to pick up
    </div>
    <div>
        Item:
    </div>
    <div>
        Stuff
    </div>
</div>

<script type="text/javascript">
    $("#productsContainer").on("click", ".openProductModal", function() {
    $(".ui-dialog-titlebar").hide();
      $("#modal_dialog").dialog({
        buttons: {
          Close: function() {
            $(this).dialog('close');
          }
        },
        modal: true,
        width: "1000px"
      });
    });
</script>

It looks like your modal width isn't being applied correctly, likely due to the default styles of jQuery UI's .dialog() method. Try explicitly setting the width in the .dialog() initialization:

$("#modal_dialog").dialog({
width: 1000, // Set the width explicitly
buttons: {
    Close: function() {
        $(this).dialog('close');
    }
},
modal: true

});

Additionally, ensure that your CSS isn't being overridden by other styles. You can force the width using !important:

#modal_dialog {
width: 1000px !important;

}

If the issue persists, check if any parent containers have restrictive styles (like max-width or overflow: hidden).