how to change size of overlaypanel prime vue

To change the size of the OverlayPanel in PrimeVue, you can use custom CSS to set the width and height, as OverlayPanel doesn’t provide direct size props for width or height. Here’s how you can do it:

1. Assign a class to the OverlayPanel:

   You can use the class attribute to assign a custom class to the OverlayPanel.

<template>
<Button label=”Show Panel” @click=”togglePanel” />
<OverlayPanel ref=”panel” class=”custom-overlay-panel”>
<p>Your content here</p>
</OverlayPanel>
</template>

<script>
import { ref } from ‘vue’;

export default {
setup() {
const panel = ref(null);

const togglePanel = (event) => {
panel.value.toggle(event);
};

return { panel, togglePanel };
}
};
</script>

2. Apply custom CSS:

Add CSS rules to define the width and height of the OverlayPanel using the class you specified (custom-overlay-panel).

.custom-overlay-panel {
width: 300px; /* Set desired width */
height: 200px; /* Set desired height */
}

With this approach, the OverlayPanel will take on the custom size you’ve defined. You can also adjust padding, borders, or other styling within that class.

If you want to read more articles , you can click here !