1

I have an input group in a bootstrap form:

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">Browse<input type="file" name="id_document" style="display:none" class="form-control" required id="id_id_document"></span>
    </label>
    <input type="text" class="form-control" id="id_document_filename" placeholder="No File Selected" readonly>
</div>

I would like to put an overlay over the button, that matches the button in size and position:

SCSS:

.btn {
    background-image: url(/static/img/btn_bg.png);
    &::before {
        content: "";
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(255,255,255,0.9);
    }
}

The problem is, if position:relative, the element matches the button perfectly (according to safari devtools), but doesn't display. If I change it to position:absolute, it displays, but now is the size of the entire element.

Fiddle, though here for some reason the button is smaller in height than the input box, which makes the issue when position:absolute hard to see. On my site, this is not the case: https://jsfiddle.net/aq9Laaew/205866/

95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
Alex
  • 2,270
  • 3
  • 33
  • 65
  • the TLDR from the duplicate ... position:relative make the element inflow and percentage height doesn't work unless the parent has a height defined ... it's different with position absolute because the element is out of the flow – Temani Afif Sep 08 '18 at 20:20
  • @TemaniAfif Ok, thanks, but how do I tell it to be 100% of the button size? – Alex Sep 08 '18 at 20:21
  • in addtion to the above, the element is inline by default so height/width won't work .. but position:absolute will make it block – Temani Afif Sep 08 '18 at 20:21
  • it depends on what yo want to achieve? position:absolute is not suitable ? – Temani Afif Sep 08 '18 at 20:22
  • position:absolute makes it the width and height of the hidden input block, instead of the height and width of the button – Alex Sep 08 '18 at 20:24
  • add position:relative to button so that absolute is relative to the button – Temani Afif Sep 08 '18 at 20:25
  • 1
    That worked! thank you – Alex Sep 08 '18 at 20:29

0 Answers0