admin/37794-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Admin Search: Override search_form template for compact inline layout

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-01 04:39:18 +00:00
parent 12a9185f1e
commit 1fdd01e827
3 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/templates/admin/search_form.html Normal file
View File

@ -0,0 +1,18 @@
{% load i18n static %}
{% if cl.search_fields %}
<div id="toolbar" class="clearfix mb-3">
<form id="changelist-search" method="get" class="form-inline">
<div class="input-group" style="width: 100%; max-width: 300px; display: flex; flex-wrap: nowrap;">
<input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" class="form-control" placeholder="{% trans 'Search' %}" autofocus style="border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1;">
<div class="input-group-append">
<button type="submit" class="btn btn-primary" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
<i class="fas fa-search"></i> {% trans 'Search' %}
</button>
</div>
</div>
{% for pair in cl.params.items %}
{% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>{% endif %}
{% endfor %}
</form>
</div>
{% endif %}

26
static/css/custom.css
View File

@ -179,37 +179,23 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
border-bottom: 1px solid #f0f0f0;
}
/* --- Fix Admin Search Box Layout --- */
/* --- Fix Admin Search Box Layout (Backup for overridden template) --- */
/* Target the search form container in Jazzmin/AdminLTE */
#changelist-search,
#changelist-search .form-group,
#changelist-search .input-group {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important; /* Prevent wrapping */
max-width: 400px !important; /* Reduce the overall width */
flex-wrap: nowrap !important;
max-width: 300px !important;
}
/* Make the input field take available space but respect the container width */
/* Make the input field take available space */
#changelist-search input[type="text"] {
width: auto !important;
flex-grow: 1 !important;
margin-right: 8px !important; /* Space between input and button */
width: auto !important;
}
/* Fix for RTL */
[dir="rtl"] #changelist-search input[type="text"] {
margin-right: 0 !important;
margin-left: 8px !important;
}
/* Ensure the button stays inline and overrides any block behavior */
/* Ensure the button stays inline */
#changelist-search button[type="submit"],
#changelist-search .btn {
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
width: auto !important;
height: auto !important;
}

26
staticfiles/css/custom.css
View File

@ -179,37 +179,23 @@ body.model-platformprofile label[for="id_admin_panel_logo"] {
border-bottom: 1px solid #f0f0f0;
}
/* --- Fix Admin Search Box Layout --- */
/* --- Fix Admin Search Box Layout (Backup for overridden template) --- */
/* Target the search form container in Jazzmin/AdminLTE */
#changelist-search,
#changelist-search .form-group,
#changelist-search .input-group {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important; /* Prevent wrapping */
max-width: 400px !important; /* Reduce the overall width */
flex-wrap: nowrap !important;
max-width: 300px !important;
}
/* Make the input field take available space but respect the container width */
/* Make the input field take available space */
#changelist-search input[type="text"] {
width: auto !important;
flex-grow: 1 !important;
margin-right: 8px !important; /* Space between input and button */
width: auto !important;
}
/* Fix for RTL */
[dir="rtl"] #changelist-search input[type="text"] {
margin-right: 0 !important;
margin-left: 8px !important;
}
/* Ensure the button stays inline and overrides any block behavior */
/* Ensure the button stays inline */
#changelist-search button[type="submit"],
#changelist-search .btn {
margin-top: 0 !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
width: auto !important;
height: auto !important;
}