Comments (1)
apalfrey
commented on June 19, 2024
4
Apologies for the (rather late!) response! I've been a bit busy recently unfortunately. I've taken a look at the issue and there's a couple things I've managed to figure out. I don't really know anything about python myself so, bear with me!
In your views file (https://github.com/Alireza-Farahani/selec2-BS5-DAL/blob/main/app/views.py) on line 19, the allow clear option needs to be 'data-allow-clear': 'true' instead of 'data-allow-clear': True. Having the value as True instead of 'true' causes the allow clear functionality to not work, probably something in Select2.
The other thing I noticed seemed to somewhat be caused by django-autocomplete-light itself. It seems that when it renders the form into the page, it also includes the scripts and stylesheets for itself and select2:
This is causing some issues with the cascading of styles as this theme is meant to be included AFTER select2, meaning some of the overrides aren't working including the placement of the clear cross.
If you replace the template file you're using with the following, it seems to sort out the styling correctly:
{% load static %}
{% load i18n %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"
{% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2-BS5-DAL</title>
<link rel="shortcut icon" type="image/png" href="{% static 'media/favicon.ico' %}"/>
<script crossorigin="anonymous" src="{% static 'js/jquery.min.js' %}"></script>
{{ form.media }}
{% if LANGUAGE_BIDI %} {# RTL lang #}
<link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/bootstrap.rtl.min.css' %}">
<link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/select2-bootstrap-5-theme.rtl.min.css' %}">
{% else %}
<link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/select2-bootstrap-5-theme.min.css' %}">
{% endif %}
<script crossorigin="anonymous" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
<form class="p-3" action="/dummy" method="get">
{{ form.as_p }}
</form>
</body>
</html>
Hope this helps!
from select2-bootstrap-5-theme.
Related Issues (20)
- Floating Label - Multi Select Box HOT 2
- Validation icons HOT 1
- Dark mode HOT 6
- input not focus on mobile (iphone) HOT 4
- select2-bootstrap-5-theme@npm:1.2.0 doesn't provide @popperjs/core (p36ae4), requested by bootstrap HOT 2
- The magnifying glass image and the CSS to display it seem to be missing from all the v4 e v5 themes. HOT 1
- Minor CSS change in Bootstrap 5.2.0 HOT 2
- Repo "About"
- Yarn warning with @popperjs/core
- Error after upgrade to "Bootstrap 5.2.3" HOT 1
- Error with BS 5.3.0-aplha1 HOT 12
- Autofocus is not working in [email protected] HOT 2
- SCSS Floating Labels
- select2-bootstrap-5-theme with ajax lost the style HOT 1
- Add pls support dark theme bootstrap 5.3 and floating label HOT 1
- Could someone add support for small images HOT 1
- https://cdn.jsdelivr.net/npm/[email protected]/+esm
- Non-Responsive when viewport changes HOT 1
- With a multiple select, the search input isn't actually inline (ie it breaks onto it's own line) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from select2-bootstrap-5-theme.