mdl-select | Google 's Material Design Lite Select Input | User Interface library

I am trying to display the dynamic value fetched from the server in a mdl select value for the edit option. I am using jquery .val() for filling the value of the input tag. How even the data is not displayed in the select menu. Can anyone help me do it?

Here is the code I am using for displaying the select Menu:

I have a problem using a dropdown list (created with ul & li) inside a div (card), both from Material Design Lite. My main problem is that the height of the total options of the list is greater than the div height. This situation means that I can not see the last options of the dropdown menu. How can I do that the dropdown list partially (depending on the height of the list) come out of the div?

I leave you here my code. As you can see, there are two files (a css and a js) that are locally located. I can not found the url to imported directly, so I leave you the url where you can download: https://github.com/CreativeIT/getmdl-select

I'm building an app in MDL and I'm having an issue while selecting dynamically a value from the select, I'm using this plugin:

http://creativeit.github.io/getmdl-select/

This is an example of what I've tried and one of my ideas that it didn't work, I tried to select the the value and upgrading all again, but it didn't work. If you predefined the value, it will work, unfortunately there is a value that I get from a database and I cannot predefined it until it's fully loaded and the service provide me the result.

Fellow developers,

I'm trying to create a multilanguage site with Material Design Lite, in the past I have used this library:

How to Create a Multilingual Application using JavaScript

And works pretty well, it expects a JSON (en.json) like this:

I'm just trying to use a simple select box but when I select a value it does not get selected. While in the example it does. I have imported the css and javascript but it just doesn't work.

I'm trying to get the StatusId of the selected item in my list.

I have a list of status created with Material Design Lite:

I'm having a strange problem with Material Design Lite library. I've included the mdl js script tag before closing the body tag, according to documentation. However, I'm unable to apply the styling from the mdl library. Upon inspecting the dev tools, I found that the event listeners from material.min.js aren't being applied to the text fields and buttons, etc. I'm attaching two images to better explain the situation.

As you can see, the files are being loaded...

But I can't see any animations from the MDL for text fields.

PS. I'm running the website on a local server. Any kind of help will be greatly appreciated. Thanks...

HTML:

I am very sure that I am using the ngModel correctly, but my model will not be updated when the textfield changes. I have used this constellation several times in my app without any problems. I have been sitting on it for a while now and do not see my mistake, maybe a second pair of eyes will help. Could it be that the ngIf influences the binding?

I am using Angular5. And the Maseemann Components

UPDATE:

I edited the first textfield for testing like this:

I'm using mdl-select component. It's a drop-down list. When you press it there are focusin event fired. But it doesn't when you press an arrow-dropdown icon, so I needed to change a template a bit to have a desired behavior. But it's a library component. Is there a way to override it's template?

The thing I need to change just to add tabindex=\"-1\" to element. I can do it with js, but I use component a lot in app, and I don't want to use document.getElement... every time I use MdlSelectComponent in the views of my own components.

I tried to use @Component decorator function on MdlSelectComponent type, however it requires to declare this class once again and anyway have done nothing.

main.browser.ts