Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of the select box based on the table's width.
Due to the fixed width of the select box, the table rows are overlapping and causing the container to expand upwards with a scroll due to the width constraint.
Below is the code snippet:
<div class="dropdown_grid my-dropdown--medium>
... div related to title and toggle
// here is the container
<div
class="dropdown_grid_container"
ref="floating"
v-ur-attach-root:fit
v-click-outside.anchor="close"
>
<ul><li><my-table :items="items" :headers="headers"
single-select></my-table></li></ul>
</div>
</div>
CSS for this:
.dropdown_grid {
display: inline-block;
position: relative;
min-width: 150px;
width: 100%;
color: #333333;
cursor: pointer;
}
.dropdown_grid_container {
width: 100%;
position: absolute;
margin-top: -1px;
min-width: 500px;
overflow-y: auto;
background-color: #FFFFFF;
border: 1px solid #959595;
z-index: 200;
max-height: 200px;
padding: 8px 1px;
margin-left: 2px;
}
.my-dropdown--medium {
font-size: 14px;
line-height: 24px;
height: 32px
I've come across multiple posts discussing this issue, but I haven't been able to figure out how to dynamically adjust the width based on the child's width. Any suggestions on how to achieve this?