Modal frame custom size

App Building
,
2

You can target any component using CSS attribute selectors (an attribute and attribute value wrapped in square brackets) and substring matching.

Using an id attribute selector let's us target the substring value of what you named that component / your component ID. All we have to do is:

  1. Name our component with a unique name relative to its purpose. For this example, let's just call it myCustomSizeModal. This is the value of our component ID.
  2. We then use substring matching on our attribute selector by following it with the asterisk symbol *, which will target any attribute value with myCustomSizeModal somewhere within its value string.
  3. We then target our id attribute with attribute selector syntax. In this case, it would look like this:
[id*="myCustomSizeModal"] {
  width: 200px !important; /*  ...use !important to override default width... */
  height: 200px !important; /* ...use !important to override default height... */
}
  1. This would change the width and height of the modal to 200px × 200px.
1 Like