After the dialog is opened, and the page refreshed, the dialog will not close if opened again. It won’t close by clicking the space around the dialog or the buttons on the dialog.

Here I declare the contents of the dialog:

 let dialogContent = {
      title: 'Default Settings',
      form: {
        header1: {
          type: 'heading',
          label: 'Sort courses by: '
        },
        option: {
          type: 'radio',
          model: 'opt1',
          items: [
            {label: 'Course', value: 'opt1'},
            {label: 'Section', value: 'opt2'}
          ]
        },
        header2: {
          type: 'heading',
          label: 'Select the default number of rows in tables: '
        },
        slider: {
          type: 'slider',
          label: 'Default rows displayed',
          min: 5,
          max: 15,
          step: 5,
          withLabel: true,
          model: 5,
          color: 'primary'
        }
      },
      buttons: [
        'Cancel',
        {
          label: 'Save',
          handler (data) {
            Toast.create({
              html: 'Defaults Updated',
              color: 'white',
              bgColor: 'grey'
            })
          }
        }
      ]
 }

and here I create the dialog:

 const dialog = Dialog.create(
      dialogContent
 )

In the project i’m working on there is a q-layout with q-side-links on the left side. I have a second q-layout with q-side-links that is just a smaller version of the first with thumbnails. When one q-layout closes the other opens. Because of the multiple q-layouts there is a lot of white space left to scroll down. It appears that even though one of the q-layouts is hidden it doubles the height necessary for the page. Is there any way to prevent having this extra height because of the multiple q-layouts?

How can I change the color that is applied by default on q-side-links that are contained in a q-layout?