diff options
| author | Teddy Wing | 2018-02-01 11:57:40 +0100 |
|---|---|---|
| committer | Teddy Wing | 2018-02-01 15:42:04 +0100 |
| commit | 87ca2f0e7fd9b331363eb3f2dc4ba891f8a1901a (patch) | |
| tree | e906b4e2ad8693ac64cc88c69e92e72be60eb8a0 | |
| parent | c99847eb430a6f98c019f71f4f5e05831f3e054d (diff) | |
| download | chouette-core-87ca2f0e7fd9b331363eb3f2dc4ba891f8a1901a.tar.bz2 | |
_select2.sass: Prevent drop-down arrow from overlapping selection
When the text of the current selection was very long, it could extend to
the end of the input, the farthest right:
+-------------------+
| Long text is long |
+-------------------+
The problem is that the arrow indicating you can click on the input to
bring up a drop-down list of options would cover the "g" in "long" in
the above example (well, not exactly because of proportional width
characters, but you get the idea).
Fix the overlap by overriding Bootstrap Select2's style from
app/assets/stylesheets/vendor/select2-bootstrap.css:306-309, which looks
like this:
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
color: #555555;
padding: 0;
}
Obviously, the padding is wrong. We need some right padding to give room
for the arrow. What are you thinking Bootstrap Select2?
Refs #5576
| -rw-r--r-- | app/assets/stylesheets/components/_select2.sass | 3 |
1 files changed, 3 insertions, 0 deletions
diff --git a/app/assets/stylesheets/components/_select2.sass b/app/assets/stylesheets/components/_select2.sass index 38603e11a..f31387c9f 100644 --- a/app/assets/stylesheets/components/_select2.sass +++ b/app/assets/stylesheets/components/_select2.sass @@ -79,6 +79,9 @@ .select2-search--inline .select2-search__field height: 28px + .select2-selection__rendered + padding-right: 20px + .select2-container--bootstrap .select2-selection border-color: rgba($grey, 0.3) |