aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/dashboard/searchable_select_multiple.html
diff options
context:
space:
mode:
authorSawyer Bergeron <sbergeron@iol.unh.edu>2019-06-28 15:32:40 +0000
committerGerrit Code Review <gerrit@opnfv.org>2019-06-28 15:32:40 +0000
commit8149a888fe6f7c1c3b1b3be2b3996c6d225d5a53 (patch)
tree183eab6f3f1644e6f70e629861f0649c6834e180 /src/templates/dashboard/searchable_select_multiple.html
parent1293c6e1d23d8fe62ee6721ff9a107ca571d9244 (diff)
parent7fec796ae500313ddbbbedf32d4f7581985d41d4 (diff)
Merge "Replace and change CSS"
Diffstat (limited to 'src/templates/dashboard/searchable_select_multiple.html')
-rw-r--r--src/templates/dashboard/searchable_select_multiple.html158
1 files changed, 14 insertions, 144 deletions
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index 8bcf890..8299a55 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -1,19 +1,18 @@
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/static/js/dashboard.js"></script>
-
-<div id="search_select_outer" class="autocomplete">
- <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
- {% if incompatible == "true" %}
- <h3>Warning: Incompatible Configuration</h3>
- <p>Please make a different selection, as the current config conflicts with the selected pod</p>
- {% endif %}
- </div>
- <div id="added_counter">
- <p id="added_number">0</p>
- <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
+<div id="search_select_outer" class="d-flex flex-column">
+ {% if incompatible == "true" %}
+ <div class="alert alert-danger" role="alert">
+ <h3>Warning: Incompatible Configuration</h3>
+ <p>Please make a different selection, as the current config conflicts with the selected pod</p>
+ </div>
+ {% endif %}
+ <div id="added_counter" class="text-center">
+ <span id="added_number">0</span>
+ <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</span>
</div>
- <div id="added_list">
+ <div id="added_list" class="pb-2">
</div>
@@ -22,143 +21,14 @@
>
</input>
- <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
+ <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
{% if disabled %} disabled {% endif %}
>
</input>
- <div id="scroll_restrictor">
- <ul id="drop_results"></ul>
+ <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
+ <ul id="drop_results" class="list-group w-100 overflow-auto position-absolute"></ul>
</div>
- <style>
- #scroll_restrictor {
- flex: 1;
- position: relative;
- overflow-y: auto;
- padding-bottom: 10px;
- }
-
- #added_list {
- margin-bottom: 5px;
- }
-
- .autocomplete {
- display: flex;
- flex: 1;
- flex-direction: column;
- }
- #user_field {
- font-size: 14pt;
- padding: 5px;
- height: 40px;
- border: 1px solid #ccc;
- border-radius: 5px;
-
- }
-
- #drop_results{
- list-style-type: none;
- padding: 0;
- margin: 0;
- min-height: 0;
- border: solid 1px #ddd;
- border-top: none;
- border-bottom: none;
- visibility: inherit;
- flex: 1;
-
- position: absolute;
- width: 100%;
-
- }
-
- #drop_results li a{
- font-size: 14pt;
- background-color: #f6f6f6;
- padding: 7px;
- text-decoration: none;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- #drop_results li a {
- border-bottom: 1px solid #ddd;
- }
-
- .list_entry {
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-top: 5px;
- vertical-align: middle;
- line-height: 40px;
- height: 40px;
- padding-left: 12px;
- width: 100%;
- display: flex;
- }
-
- #drop_results li a:hover{
- background-color: #ffffff;
- }
-
- .added_entry_text {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: inline;
- width: 100%;
- }
-
- .btn-remove {
- float: right;
- height: 30px;
- margin: 4px;
- padding: 1px;
- max-width: 20%;
- width: 15%;
- min-width: 70px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .entry_tooltip {
- display: none;
- }
-
- #drop_results li a:hover .entry_tooltip {
- position: absolute;
- background: #444;
- color: #ddd;
- text-align: center;
- font-size: 12pt;
- border-radius: 3px;
-
- }
-
- #drop_results {
- max-width: 100%;
- display: inline-block;
- list-style-type: none;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- #drop_results li {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- #added_counter {
- text-align: center;
- }
-
- #added_number, #addable_limit {
- display: inline;
- }
- </style>
</div>
<script type="text/javascript">