I am currently designing a compact upload feature.
It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport.
Within this element, there is a form containing an input field and another nested div.
Challenge:
The input field should be transparent, purely functional. I aim for the nested div to sit directly underneath, displaying an icon and text. Both the input and inner div should completely fill the enclosing element.
Attempts made so far:
Experimented with using positions: absolute and relative, manipulating z-index. When using a relative position, setting width and height to 100% worked, but the elements remained adjacent. Transitioning to absolute positioning allowed for overlays, though the input field expanded beyond its parent's size. Direct size manipulation of the input field seemed restricted.
<div style="width: 500px; height: 400px; background-color: #990000"> <!-- actually a card from the vue / quasar framework -->
<form enctype="multipart/form-data" method="post" style="height: 100%">
<div class="justify-center column" style="height:100%">
<input type="file" multiple :name="uploadFieldName" :disabled="isSaving" @change="filesChange()" style="align-content: center; opacity: 0.5; /* invisible but it's there! */
background-color: yellow;
width: 100%;
height: 100%;">
<div class="justify-center column" style="height: 100%; background-color: #009900;">
<q-icon name="add" size="40px" color="secondary" class="q-pa-md" />
<p class="text-secondary no-padding no-margin" style="font-size: 12px">drop documents here</p>
</div>
</div>
</form>
</div>Thank you in advance!