To make the OverlayPanel smaller in PrimeVue, you can apply custom CSS to adjust its size. Here’s a concise guide:
1. Add a Custom Class to OverlayPanel:
Assign a custom class to your OverlayPanel component.
<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. Define the Custom CSS:
Create or modify your CSS file to set the width and height of the OverlayPanel.
.custom-overlay-panel {
width: 200px; /* Adjust width as needed */
height: 150px; /* Adjust height as needed */
/* You can also add padding, border, etc. */
}
width: 200px; /* Adjust width as needed */
height: 150px; /* Adjust height as needed */
/* You can also add padding, border, etc. */
}
4o mini
