Making dialog mobile friendly and buttons showing along the lines of the text

JavaScript
1

Is it possible to achieve the following with the following jQuery dialog:

  1. Move the Agreed button just below where it says I have a boat and

  2. make the dialog responsive/mobile friendly and be adjusted to the full-screen size of the user window?

  3. I also want to get rid of the title Empty everything and the cross sign and just display Empty everything above I have a bike checkbox.

JSFiddle here: https://jsfiddle.net/xj345c9b/2/

Eventually, I will have to make sure that they have selected all checkboxes when Agreed button is clicked but that will come next.

2

You can apply custom classes to the dialog using the classes configuration option. That will let you easily target it with custom css to modify the dialog as desired. For example:

   $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      title:"Empty everything?",
      classes: {
      	'ui-dialog':'my-custom-dialog'
      },
      buttons: {
        "Agreed": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

Applies the class my-custom-dialog to the main dialog div. You can use that combined with the classes jQuery applies to the various elements to modify the look.

.my-custom-dialog .ui-dialog-titlebar {
  display: none;
}

.my-custom-dialog .ui-dialog-buttonset {
  float: none !important;
}
1 Like
3

Using the method mentioned by @kicken above you could set the width to say 80% (or more) and then do something like this.

.ui-dialog.my-custom-dialog {
  left:0!important;
  right:0!important;
  margin:auto;
}

.ui-dialog.my-custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
  float:none;
  display:flex;
  justify-content:space-between;
}

<script>
  $( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: true,
      height: "auto",
      width: "80%",
      modal: true,
      title:"Empty everything?",
        classes: {
      	'ui-dialog':'my-custom-dialog'
      },
      buttons: {
        "Agreed": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>

Of course you won’t be able to drag left and right any more but only up and down (which seems nonsense to me anyway as the standard dialogue does not adjust if you change the window size after its loaded and the dialogue is cut off).

4

Thanks. That works - I tested it here:

I’m wondering if it’s possible to

  1. Have the following title just above the check boxes as if they using some headers.
    image

  2. To get rid of the cross button at the right hand side.

  3. Similarly for the Agreed button, if I can have it on the page.

And if I get rid of title to address part of my point 1 above, then where would the classes gonna go?

title:"Empty everything?",
      classes: {
      	'ui-dialog':'my-custom-dialog'
      },

Another thing I noticed is that if I keep the width to 100%, it stops resizing if I reduce the size of browser but on mobile version, it looks good.

5

Not sure I’m following but surely you just put the header in the html

e.g.

<div id="dialog-confirm" >
<h3>Header here</h3>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
</div>

Again I’m not sure what you are asking but you can remove the title. It doesn’t have anything to do with the classes added?

 <script>
  $( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: true,
      height: "auto",
      width: "100%",
      modal: true,
        classes: {
      	'ui-dialog':'my-custom-dialog'
      },
      buttons: {
        "Agreed": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>

You could hide it with css but seems a shame to lose the ability to close the modal easily.

.ui-dialog.my-custom-dialog .ui-dialog-titlebar .ui-corner-all {
  display:none;
}

If you

look at the documentation

it gives you instructions on how to hide the close button.

Hiding the close button

In some cases, you may want to hide the close button, for instance, if you have a close button in the button pane. The best way to accomplish this is via CSS. As an example, you can define a simple rule, such as:

Sorry I don’t really know what you mean by on the page? If you meant you don’t want the button in the gray part then you can use the custom classes you added to remove the backgrounds and borders as required.

6

Thanks PaulOB.

One question - if I have a dialog showing on full screen (100% width) , I know you mentioned 80% in your example, is there a way I can bock the scrollbar of that page and show scrollbar only for the dialog if the content of the dialog needs scrolling. Basically, I don’t want to have the user scroll up and see the other back side of the dialog (other parts of the page even though that section is inactive).

7

If you mean you don’t want the body content behind the modal dialogue to scroll you could hide the overflow on the body but then you’d have to change the modal dialogue to be position:fixed.

If yo meant you want the content in the dialogue to scroll then you’d just need to add overflow:auto to the dialogue and se a height (or a max-height).

Are you sure that the dialogue is the right component for you as you seem to be fighting it rather than using it as it was designed?:slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.