Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

Button is overlap from card area


Hi, I got 2 filters and 1 export button, but when i shrink the browser size into a mobile size it seems the button is pushed outside the card area like this:

https://ibb.co/9vF1wRW

and here's my HTML code:


<div class="card-header border-0 pt-6">
 <!--begin::Card title-->
 <div class="card-title">
 <!--begin::Search-->
 <div class="d-flex align-items-center position-relative my-1">
 <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
 <span class="svg-icon svg-icon-1 position-absolute ms-6">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
 <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor"></path>
 </svg>
 </span>
 <!--end::Svg Icon-->
 <input type="text" data-kt-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Cari Sertifikat">
 </div>
 <!--end::Search-->
 </div>
 <!--begin::Card title-->
 <!--begin::Card toolbar-->
 <div class="card-toolbar">
 <!--begin::Toolbar-->
 <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">

 <!--begin::Filter-->
 <div class="w-250px me-3">
 <!--begin::Select2-->
 <select class="form-select form-select-solid select2-hidden-accessible" data-control="select2" data-hide-search="true" data-placeholder="Diklat" data-kt-filter="training_type" data-select2-id="select2-data-1-4691" tabindex="-1" aria-hidden="true" data-kt-initialized="1">
 <option data-select2-id="select2-data-3-gzdz"></option>
 <option value="all">Semua</option>
 <option value="BASIC SAFETY TRAINING (BST)">BASIC SAFETY TRAINING (BST)</option>
 <option value="BASIC SAFETY TRAINING - KLM">BASIC SAFETY TRAINING - KLM</option>
 <option value="SURVIVAL CRAFT AND RESCUE BOAT (SCRB)">SURVIVAL CRAFT AND RESCUE BOAT (SCRB)</option>
 <option value="ADVANCED FIRE FIGHTING (AFF)">ADVANCED FIRE FIGHTING (AFF)</option>
 <option value="MEDICAL FIRST AID (MFA)">MEDICAL FIRST AID (MFA)</option>
 <option value="MEDICAL CARE (MC)">MEDICAL CARE (MC)</option>
 <option value="CROWD MANAGEMENT TRAINING ( CMT )">CROWD MANAGEMENT TRAINING ( CMT )</option>
 <option value="CRISIS MANAGEMENT AND HUMAN BEHAVIOUR TRAINING (CMHBT )">CRISIS MANAGEMENT AND HUMAN BEHAVIOUR TRAINING (CMHBT )</option>
 <option value="SECURITY AWARENESS TRAINING (SAT )">SECURITY AWARENESS TRAINING (SAT )</option>
 <option value="SECURITY AWARENESS TRAINING WITH DESIGNATED SECURITY DUTY ( SAT SDSD )">SECURITY AWARENESS TRAINING WITH DESIGNATED SECURITY DUTY ( SAT SDSD )</option>
 </select><span class="select2 select2-container select2-container--bootstrap5" dir="ltr" data-select2-id="select2-data-2-q3oq" ><span class="selection"><span class="select2-selection select2-selection--single form-select form-select-solid" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-pp81-container" aria-controls="select2-pp81-container"><span class="select2-selection__rendered" id="select2-pp81-container" role="textbox" aria-readonly="true" title="Diklat"><span class="select2-selection__placeholder">Diklat</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
 <!--end::Select2-->
 </div>
 <!--end::Filter-->


 <!--begin::Filter-->
 <div class="w-150px me-3">
 <!--begin::Select2-->
 <select class="form-select form-select-solid select2-hidden-accessible" data-control="select2" data-hide-search="true" data-placeholder="Angkatan" data-kt-filter="class_of" data-select2-id="select2-data-4-wwid" tabindex="-1" aria-hidden="true" data-kt-initialized="1">
 <option data-select2-id="select2-data-6-8d24"></option>
 <option value="all">Semua</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 </select><span class="select2 select2-container select2-container--bootstrap5" dir="ltr" data-select2-id="select2-data-5-3hey" ><span class="selection"><span class="select2-selection select2-selection--single form-select form-select-solid" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-joys-container" aria-controls="select2-joys-container"><span class="select2-selection__rendered" id="select2-joys-container" role="textbox" aria-readonly="true" title="Angkatan"><span class="select2-selection__placeholder">Angkatan</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
 <!--end::Select2-->
 </div>
 <!--end::Filter-->

 <!--begin::Export-->
 <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
 <!--begin::Export buttons-->
 <div id="kt_datatable_export" class="d-none"></div>
 <!--end::Export buttons-->
 </div>

 <!--begin::Export dropdown-->
 <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
 <!--begin::Svg Icon | path: icons/duotune/arrows/arr091.svg-->
 <span class="svg-icon svg-icon-2">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect opacity="0.3" width="12" height="2" rx="1" transform="matrix(0 -1 -1 0 12.75 19.75)" fill="currentColor"></rect>
 <path d="M12.0573 17.8813L13.5203 16.1256C13.9121 15.6554 14.6232 15.6232 15.056 16.056C15.4457 16.4457 15.4641 17.0716 15.0979 17.4836L12.4974 20.4092C12.0996 20.8567 11.4004 20.8567 11.0026 20.4092L8.40206 17.4836C8.0359 17.0716 8.0543 16.4457 8.44401 16.056C8.87683 15.6232 9.58785 15.6554 9.9797 16.1256L11.4427 17.8813C11.6026 18.0732 11.8974 18.0732 12.0573 17.8813Z" fill="currentColor"></path>
 <path opacity="0.3" d="M18.75 15.75H17.75C17.1977 15.75 16.75 15.3023 16.75 14.75C16.75 14.1977 17.1977 13.75 17.75 13.75C18.3023 13.75 18.75 13.3023 18.75 12.75V5.75C18.75 5.19771 18.3023 4.75 17.75 4.75L5.75 4.75C5.19772 4.75 4.75 5.19771 4.75 5.75V12.75C4.75 13.3023 5.19771 13.75 5.75 13.75C6.30229 13.75 6.75 14.1977 6.75 14.75C6.75 15.3023 6.30229 15.75 5.75 15.75H4.75C3.64543 15.75 2.75 14.8546 2.75 13.75V4.75C2.75 3.64543 3.64543 2.75 4.75 2.75L18.75 2.75C19.8546 2.75 20.75 3.64543 20.75 4.75V13.75C20.75 14.8546 19.8546 15.75 18.75 15.75Z" fill="currentColor"></path>
 </svg>
 </span>
 <!--end::Svg Icon-->Export
 </button>

 <!--begin::Menu-->
 <div id="kt_datatable_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22copy" target="_blank" rel="noopener noreferrer">
 Copy to clipboard
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22excel" target="_blank" rel="noopener noreferrer">
 Export as Excel
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22csv" target="_blank" rel="noopener noreferrer">
 Export as CSV
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22pdf" target="_blank" rel="noopener noreferrer">
 Export as PDF
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 <!--end::Export dropdown-->

 <!--begin::Hide default export buttons-->
 <div id="kt_datatable_buttons" class="d-none"><div class="dt-buttons btn-group flex-wrap"> <button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="kt_datatable" type="button"><span>Copy</span></button> <button class="btn btn-secondary buttons-excel buttons-html5" tabindex="0" aria-controls="kt_datatable" type="button"><span>Excel</span></button> <button class="btn btn-secondary buttons-csv buttons-html5" tabindex="0" aria-controls="kt_datatable" type="button"><span>CSV</span></button> <button class="btn btn-secondary buttons-pdf buttons-html5" tabindex="0" aria-controls="kt_datatable" type="button"><span>PDF</span></button> </div></div>
 <!--end::Hide default export buttons-->
 <!--end::Export-->

 </div>
 <!--end::Toolbar-->
 </div>
 <!--end::Card toolbar-->
 </div>


How can I fix it? Thanks


user
Eko Budiyanto 2 years ago
Bootstrap Metronic HTML
1 Answers
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 (1)

user
Sean Author2 years ago

Hi,

Sure, it can be fixed. Can you please share a test link with us? We could try some fixes right in your HTML code via browser code inspector and suggest a solution. Unfortunately, we can't reproduce the issue in our end unless you are using existing demos as they are without any major changes. If so, please let us know which demo you are using and we will check it on that demo.

Basically, such fixes require to use flex-wrap class on the parent container that allows to draw children elements when there is no space to fit. To avoid the line of the button label you can use text-nowrap class for the button.

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