0

I am building a Blazor Server date picker component. The component consists of 2 parts, an input field and a hidden card containing my calendar. The calendar is positioned directly underneath the input field (aligned so the top left of the card meets the bottom left of the input field) and shown when the field is clicked.

Currently clicking the field shows the card, but it forces every element under the component on the page downwards as it has to fit the card in between. I set the card div to be position relative and set a really high z-index, but it doesn't display in front of the rest of the page. This is the Component (I have removed all of the calendar html as it is lengthy).

<div class="parent">
    <div>
        <label class="control-label" for="@Id">@Label</label>
    </div>
    <div class="input-group mb-2" tabindex="0" @onclick="()=>SetCalendar()">
        <InputDate id="@Id" class="form-control datePick" tabindex="0" @bind-Value="@Date" @onkeyup="()=>ManualDate()" />
        <span class="input-group-text" style="cursor:pointer"> <span class="oi oi-calendar" aria-hidden="true"></span></span>
    </div>
    <div class="col-12 child" style="z-index:9999;position:relative;">
        //This is where my calendar HTMl is
    </div>
</div>

The Component is dropped on a page like this:

<DatePicker @bind-Date="ExampleDate" Label="All Days" />

What have I done wrong here as I thought position-relative and z-index should allow for an element to be displayed in front of another?

bruceiow
  • 63
  • 7
  • 2
    The parent container has to be `position: relative` while the card `position: absolute` if you want it to overlay the rest of the content – LS_ Aug 31 '23 at 10:21
  • 1
    It's really a CSS question, see https://stackoverflow.com/a/10487329/20339875 – maciek Aug 31 '23 at 10:37

0 Answers0