Creating a language selection dropdown using md-select and md-option, we are incorporating flag icons from flag-icon-css to represent each country alongside the language string.
An unusual behavior occurs when using the md-select element, where all the elements are rendered correctly except for the selected one and the one being hovered over with the mouse cursor.
In our setup, a typescript class is utilized to store necessary information, while the HTML structure appears as follows:
<md-select ng-model="login.selectedLanguage" class="lang-select {{login.selectedLanguage}}">
<md-option ng-repeat="lang in login.languages" value="{{lang.langKey}}" ng-click="login.changeLang(lang.langKey)" class="lang-option">
{{lang.text}}
</md-option>
</md-select>We have defined CSS classes within a sass file to handle the flags associated with each language. It should be noted that the CSS class for the md-select itself functions correctly.
@mixin flag($country)
background-image: url('#{$ROOT}/bower_components/flag-icon-css/flags/4x3/#{$country}.svg')
.lang-select
margin-top: 22px
.lang-option
padding-left: 50px
background: no-repeat 10px center
background-size: 30px 20px
text-transform: none
.lang-option[value="de_DE"]
+flag('de')
.lang-option[value="en_EN"]
+flag('gb')
.lang-option[value="fr_FR"]
+flag('fr')The issue arises when hovering over an item causing the flag to disappear or appear to shift out of view within the dropdown. To showcase this problem, I've provided an image link where I hover over English while French (Francais) is selected.
To replicate the scenario, a fiddle was created but could not fully integrate the sass code. Therefore, the flags displayed are hardcoded and don't exhibit the disappearing behavior on hover or select. However, the default behavior of md-select is evident in the fiddle.
If the css code isn't at fault, how can this behavior be prevented to ensure consistent display of flags within md-option?
UPDATE:
Adjusting the background-position: center attribute has revealed a subtle animation effect behind the flag's movement, suggesting it slides into view from outside the container's boundaries.
Regards