Blazor InputFile has way too large drop area

Question

I am building a small file upload component using InputFile (C#, Blazor). I have been following various examples on the internet and built everything as outlined there, but the InputFile element in my application is far too big. Here's a screenshot from Chrome's dev view with the InputFile element area in blue:

The actual intended drop zone is the small blue area with dashed border.

HTML:

<div id="FileBrowser">
    <div class="single-row-multi-elem">
        <div class="single-row-input">
            <div class="label">
                @Label
            </div>
            <SfTextBox FloatLabelType="@FloatLabelType.Never" Placeholder='' Value=@Filename Enabled="false" />
        </div>
        <div class="upload-area @dropStyle" @ref=uploadArea>
            <InputFile id="FileInput" 
                       OnChange="SelectFile" 
                       @ondragenter="HandleDragEnter"
                       @ondragleave="HandleDragLeave"></InputFile>
        </div>
    </div>
</div>

Styles:

.upload-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed blue;
    background-color: #0080FF40; /*lightblue;*/
    cursor: pointer;
    min-width: 200px;
    min-height: 100px;
    margin-left: 8px;
}

.upload-area:hover {
    border-color: #FFE000;
    background-color: #FFE00040; /* lightsteelblue;*/
}
 
.upload-area input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-area-enter {
    border-color: #006000;
    background-color: #00800040; /*lightskyblue;*/
}

Code:

private void HandleDragEnter() => dropStyle = "upload-area-enter";

private void HandleDragLeave() => dropStyle = string.Empty;

private async void UploadFile(InputFileChangeEventArgs e)
{
// ...
}

The entire component is embedded in a dialog. It looks like the InputFile element uses the client area size of the dialog for its drop area and applies an absolute positioning to it. I suppose this is caused by .upload-area input, but how do I fix this and make the InputFile element use upload-area as drop zone?

Answer 1

I found the answer myself.

The parent div of the InputFile element needs to have relative positioning, and that needs to be explicitly given:

.upload-area {
    position: relative;
    display: flex;
    ....
}