After selecting the date range option from my dropdown button, I noticed that the date range options are stacking on top of each other instead of appearing in the same row. Has anyone encountered this issue before? One solution I attempted was adjusting the width using both pixels and percentages, but this caused the entire card to stretch to the right. Any insights into why this is happening would be appreciated.
This is the default appearance before selecting "Date Range" from the dropdown menu. https://i.sstatic.net/IsLaE.png
When the "Date Range" option is selected, the options appear stacked vertically. Ideally, they should be displayed on a single row. https://i.sstatic.net/pqPFG.png
Adjusting the width property in CSS resulted in the card stretching to the right, which is not the desired outcome. https://i.sstatic.net/RFrbl.png
<div class="report-card-i report-card-i-height" style="position: fixed; z-index: 10; background-color: #fff; float: unset; top: 80px; padding-left: 100px; padding-right: 85px;">
<h1>ABC Corp - Summary</h1>
<div class="col-lg-3 text-center">
@{
<select onchange="updateDates(this, null, null, null )">
<option value="0" selected></option>
@for (int i = 1; i < @Model.droplist i++)
{
var tempValue = i;
<option value="@tempValue">@Model.droplist.ElementAt(i)</option>
}
</select>
}
</div>
<div class="col-lg-8" id="dateRange" style="display: none; width:1px">
<div class="col-lg-2">
<div class="input-group date" id="divFrom">
<div class="form-line">
<input id="startDate" name="startDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="@Model.StartDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-2">
<span class="font-13 text-muted div-center">to</span>
</div>
<div class="col-lg-2">
<div class="input-group date" id="divTo">
<div class="form-line">
<input id="endDate" name="endDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="@Model.EndDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-2">
<button id="btnTest" class="btn-orange fa-orange btn-sm" onclick="updateDateRanges()" style="margin-left: 10px">Submit</button>
</div>
</div>
<br />
<br />
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row col-lg-12">
<div class="col-sm-2 col-xs-2 text-left">
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Number of Deliveries</h4>
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Deliveries per day</h4>
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Gross Amount Due</h4>
</div>
<div class="col-sm-1 col-xs-1 text-left">
</div>
<div class="col-sm-1 col-xs-1 text-left">
<h4>Monthly Total</h4>
</div>
<div class="col-sm-1 col-xs-1 text-left">
</div>
<div class="col-sm-1 col-xs-1 text-left">
<h4>YTD Total</h4>
</div>
</div>
</div>
</div>