Greetings! I am working on a Vue Formulate form and here is the code snippet:
<template>
<div class="repeatable-container">
<FormulateForm>
<FormulateInput type="text" label="strength" placeholder="strength" />
<FormulateInput type="select" label="Quantity" placeholder="strength" />
<FormulateInput
type="select"
label="Method of intake"
placeholder="strength"
/>
<span>Remove Dossage</span>
</FormulateForm>
</div>
</template>
<script>
export default {
name: "RepeatableGroup",
};
</script>
//I am facing an issue where the flex property of .formulate-input-wrapper does not work when scoped, but works fine without it. Any insights?
<style lang="scss" scoped >
.repeatable-container {
.formulate-form,
.formulate-input-wrapper {
display: flex !important;
}
}
.formulate-input-wrapper {
display: flex !important;
}
</style>
Attached below are two images for reference:
Image with scoped attribute on style
Image without the scoped attribute on style showing accessible flex property