I encountered some issues while working on the front-end of my web app. Here are a few problems:
I need to truncate text if it's too long, so I use the following CSS:
.suggestion-box-text { white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
However, in Chrome, I can't use scroll, only keys. 2. Regardless of what I try, Safari remembers the last selected item from the list, and the next time I make a selection, it starts from there instead of the first element.
In addition, nothing seems to work properly in Firefox when I attempt to truncate long text. The scroll still works but when I navigate with keys, the list doesn't scroll.
Is there a known solution to fix this issue? Or should I keep trying different combinations until I find one that works?
HTML FILE
<div class="navbar-container container-fluid">
<div class="" id="site-navbar-search">
<form id="originalSearch" role="search" ng-submit="query()">
<div class="form-group" style="margin: 15px 0px 0px 0px">
<div class="input-search">
<speech class=""></speech>
<input id="questionForInput" type="text"
ng-change="ask.getsuggestions()" autocomplete="off"
ng-model="ask.term" class="form-control bg-dark"
placeholder="Ask ..." ng-keydown="key($event)"/>
<select id="suggestionSelection" class="suggestion-box
list-group2 bg-dark" ng-keydown="key2($event)"
multiple="multiple"ng-model="ask.term">
<option class="list-group-item2 suggestion-box-text bg-dark"
ng-repeat="command in ask.suggestions">
{{command.statement}}
</option>
</select>
<button type="submit" style="visibility: hidden; display:none"></button>
</div>
</div>
</form>
</div>
</div>
CSS FILE
.suggestion-box {
overflow: auto;
overflow: -moz-scrollbars-auto;
position: absolute;
z-index: 1;
width:100%;
visibility: hidden;
border-radius: 0px 0px 18px 18px;
outline: none;
}
.suggestion-box-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.suggestion-box {
padding-left: 15px;
}
}
body{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar { width: 0px; height: 0px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 0px; background-color: #666; border-radius: 0px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Also part of JS file
$scope.key = function($event){
if ($event.keyCode == 40) {
$('#suggestionSelection').focus();
$('#suggestionSelection').focus();
//$("select#suggestionSelection").prop('selectedIndex', -1);
//$("#suggestionSelection")[0].selectedIndex = -1;
}
else if($event.keyCode == 27) {
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}
$scope.key2 = function($event){
console.log($event.keyCode);
if ($event.keyCode == 38) {
if($('#suggestionSelection')[0].selectedIndex == -1 || $('#suggestionSelection')[0].selectedIndex == 0) {
$('#questionForInput').focus();
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}
else if($event.keyCode == 27 || $event.keyCode == 13) {
$('#questionForInput').focus();
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}