MDL-60636 themes: form autocomplete chevron down on mobile
authorBas Brands <bas@moodle.com>
Wed, 17 Jul 2019 10:28:13 +0000 (12:28 +0200)
committerBas Brands <bas@moodle.com>
Wed, 17 Jul 2019 10:28:13 +0000 (12:28 +0200)
lib/templates/form_autocomplete_input.mustache
theme/boost/scss/moodle/forms.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index ea4614d..1b2ec1a 100644 (file)
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
 {{#showSuggestions}}
-<input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
+<div class="d-inline-block position-relative">
+    <input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
+    <span class="form-autocomplete-downarrow position-absolute p-1" id="{{downArrowId}}">&#x25BC;</span>
+</div>
 {{/showSuggestions}}
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
index 55c3995..1a693dc 100644 (file)
@@ -323,11 +323,9 @@ fieldset.coursesearchbox label {
 
 .form-autocomplete-downarrow {
     color: $body-color;
-    position: relative;
-    top: 0.2em;
-    left: -1.5em;
+    top: 0.2rem;
+    right: 0.5rem;
     cursor: pointer;
-
     .loading-icon {
         position: absolute;
         top: 0;
index 581845f..a141a0f 100644 (file)
@@ -14861,9 +14861,8 @@ fieldset.coursesearchbox label {
 
 .form-autocomplete-downarrow {
   color: #373a3c;
-  position: relative;
-  top: 0.2em;
-  left: -1.5em;
+  top: 0.2rem;
+  right: 0.5rem;
   cursor: pointer; }
   .form-autocomplete-downarrow .loading-icon {
     position: absolute;
index bf7f80e..e390c73 100644 (file)
@@ -15118,9 +15118,8 @@ fieldset.coursesearchbox label {
 
 .form-autocomplete-downarrow {
   color: #373a3c;
-  position: relative;
-  top: 0.2em;
-  left: -1.5em;
+  top: 0.2rem;
+  right: 0.5rem;
   cursor: pointer; }
   .form-autocomplete-downarrow .loading-icon {
     position: absolute;