Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

filter


<div class="d-flex align-items-center gap-2 gap-lg-3">
<!--begin::Filter menu-->
<div class="m-0">
<input type="checkbox" id="filterToggleCheckbox" class="invisible" class="invisible filter-menu-toggle" />
<label for="filterToggleCheckbox" class="btn btn-sm btn-flex btn-secondary fw-bold filter-menu-label">
<i class="ki-duotone ki-filter fs-6 text-muted me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>Filtreleme
</label>

<!--end::Menu toggle-->
<!--begin::Menu 1-->

<div class="menu menu-sub menu-sub-dropdown w-250px w-md-350px" id="filterMenu">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bold">Filtreleme Seçenekleri</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">

<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Durum:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" [(ngModel)]="selectedStatus" placeholder="Durum">

<option value="">Tüm SipariÅŸler</option>
<option value="Yeni OluÅŸturuldu">Yeni OluÅŸturuldu</option>
<option value="Tedarikçi Onayı Bekleyenler">Tedarikçi Onayı Bekleyenler</option>
<option value="Tedarikçi Onaylı">Tedarikçi Onaylı</option>
<option value="Elden Onaylı">Elden Onaylı</option>
<option value="İptal Edilmiş(Onaylı)">İptal Edilmiş(Onaylı)</option>
<option value="İptal Edildi(Onaysız)">İptal Edildi(Onaysız)</option>
</select>
</div>
<!--end::Input-->
</div>
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Bir Tarih Aralığı girin:</label>
<!--end::Label-->
<!--begin::Input-->
<mat-form-field >
<mat-label>Tarih aralığını seçin</mat-label>
<mat-date-range-input [rangePicker]="picker" (dateChange)="filterOrdersByDate()">
<input matStartDate placeholder="BaÅŸlangıç tarihi" [(ngModel)]="selectedStartDate">
<input matEndDate placeholder="BitiÅŸ tarihi" [(ngModel)]="selectedEndDate">
</mat-date-range-input>
<mat-hint>GG/AA/YYYY – GG/AA/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Lokasyonlar:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!-- ilk satır -->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-4">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Adapazarı</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Merkez</span>
</label>

<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--begin::Options-->
<div class="d-flex">
<!-- ikinci satır -->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-4">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Diyarbakır</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Panel</span>
</label>
<!--end::Options-->
</div>

<!--end::Input group-->
<!--begin::Input group-->
<br />
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">SipariÅŸ Durumu:</label>
<!--end::Label-->
<!--begin::Switches-->
<div class="d-flex align-items-center">
<!-- Ä°lk checkbox -->
<div class="form-check form-check-sm form-check-custom form-check-solid me-3">
<input class="form-check-input me-1" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_customers_table .form-check-input" value="1" />
<label class="form-check-label">Açık SipariÅŸler</label>
</div>
<!-- Ä°kinci checkbox -->
<div class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input me-1" type="checkbox" value="2" />
<label class="form-check-label">Kapalı Siparişler</label>
</div>
</div>
<!--end::Switches-->
</div>
<div class="mb-10">
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-light btn-active-light-primary me-2" (click)="resetFilters()">Sıfırla</button>
<button type="submit" class="btn btn-sm btn-primary" (click)="applyFilter(selectedStatus)" data-kt-menu-dismiss="true" onclick="document.getElementById('filterToggleCheckbox').checked = false;">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
</div>
<!--end::Filter menu-->
<!--begin::Secondary button-->
<!--end::Secondary button-->
<!--begin::Primary button-->
<!--end::Primary button-->
</div>
I have such a code blog, and in this code blog, when you click anywhere other than the page, the window that opens should close, but somehow it does not close


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


@poppy playtime chapter 3 I am also experiencing the same situation.



Hi,

Could you please provide more info? Which template, framework, and demo do you use?
Can you please send us the code via https://gist.github.com/ that you are having an issue with?

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(