Ugrás a fő tartalomhoz

Customization & Styling

By default, the Kvikk Map widget opens in a full-screen modal dialog that covers the entire viewport. The widget automatically:

  • Creates a <dialog> element with ID kvikk-dialog
  • Adds the kvikk-map-open class to the <body> element when open
  • Removes the class when closed

Default Styles​

The default modal styling is:

  • Width: 100% of viewport
  • Height: 100% of viewport
  • Position: Fixed, covering entire screen
  • Z-index: Uses native dialog stacking
  • Background: White content area

Customizing the Modal​

You can customize the modal's appearance using CSS. Target the #kvikk-dialog element to apply your styles.

Example: Rounded Modal with Shadow​

Create a more elegant modal with padding, rounded corners, and a backdrop:

#kvikk-dialog {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.50);
  border-radius: 16px;
  inset: 20px !important;
  width: auto !important;
  height: auto !important;
}

#kvikk-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Mobile: Keep full-screen */
@media only screen and (max-width: 1024px) {
  #kvikk-dialog {
    border-radius: 0;
    inset: 0 !important;
    height: 100% !important;
    width: 100vw !important;
  }
}

Brand Colors​

Customize the widget's color scheme to match your brand using the color configuration option:

kvikkMapWidget.open({
  apiKey: "your_api_key_here",
  color: {
    primary: "#FF6B6B",  // Buttons, selected states, accents
    text: "#2C3E50",     // Text color
  },
  // ... other config
});

Preventing Body Scroll​

When the modal is open, the body automatically gets overflow: hidden applied to prevent background scrolling. The kvikk-map-open class is also added for additional styling hooks.

body.kvikk-map-open {
  /* Additional styles when map is open */
}

Iframe Styling​

The widget runs inside an iframe with ID kvikk-iframe. The iframe itself uses:

  • width: 100%
  • height: 100%
  • border: none
  • display: block

Generally, you won't need to style the iframe directly, but if needed:

#kvikk-iframe {
  /* Custom iframe styles */
}
vigyázat

Avoid trying to style elements inside the iframe - these are in a separate document and cannot be accessed due to same-origin policy.