Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
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 (7)


wow this saintly however ,I love your enter plus nice pics might be part personss negative love being defrent mind total poeple ,monitor arm desk mount



Ensure access to pure and safe water with our water filter plant! Aquafiltrum specializes in innovative purification systems tailored to meet your specific needs.



Explore Dubai with the best tour company in Dubai! We provide exceptional cultural tours, guiding you through historic landmarks, bustling souks, and hidden gems for a truly unforgettable Dubai experience.



Noorani Qaida - Explore our high-quality Noorani Qaida at QudratUllah, designed to facilitate Quranic learning. This foundational text is perfect for beginners looking to enhance their reading skills and deepen their understanding of the Quran.

Discover the latest collection of Embroidered chiffon dresses. Perfect for any occasion, these elegant and stylish dresses will make you stand out from the crowd. Stay fashionable with Fiza Minahil



@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  :(