MDB Pro angular select problem

Topic: MDB Pro angular select problem

Dragonnblack pro asked 6 years ago

Hello, I added MDB Pro to my angular-cli project but I got some problem when I try to use the md-select, the same problem happens when I try to copy/paste simple select to the MDB pro seed given. This url show how it's gonna be wrong : https://imgur.com/a/cgZOD If anyone have a suggestion ? Best regards

Add comment

Witold Tkaczyk free answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

Hello,

I found the problem. This issue was created by position: relative style.

To fix this problem you need to add z-index: 99 style to your select.

hope it helps.

EDIT

HTML file

  <div class="row">

     <div class="col-md-6 my-broken-select">

        <mdb-select [options]="colorSelect"placeholder="Choose your option"class="colorful-select dropdown-primary"></mdb-select>

        <label>Blue select</label>

      </div>

    </div>

  <div class="row">

  <div class="col-md-6 my-broken-select-1">

    <mdb-select [options]="colorSelect"placeholder="Choose your option 1"class="colorful-select dropdown-primary"></mdb-select>

    <label>Blue select</label>

  </div>

  </div>

CSS:

.my-broken-select {
 z-index: 99
}
.my-broken-select-1 {
 z-index: 98
}

Regards

Dragonnblack pro commented 6 years ago

Hello, Indeed, it solves the problem. However, it should rather put a z-index less than 100 because if you have a navbar it goes over. If a select is below another select then the open top select is merged with the bottom one ... (since they have the same z-index) This url show how it’s gonna be wrong : https://imgur.com/a/lRHIW

Witold Tkaczyk free commented 6 years ago

Hello, for now, you can do this manually by decrementing your index for each select under the select. I added this to our bug list so it will be fixed properly in a new release.

Dragonnblack pro commented 6 years ago

Hello, Ok, I'll see to increment the z-index at the opening and then decree it at closing. I saw that there were events in the Select component. however, I have not found a way to set default values?

Witold Tkaczyk free commented 6 years ago

I added EDIT section with the solution. This is not a nice solution but for now, if you want to have a select under the select you need to do this.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hey guys, This problem will be fixed in next release of MDB Angular. You can now find it on our GitLab dev branch! Feel free to upgrade and test. Best Regards, Damian

Dragonnblack pro commented 6 years ago

Hi, I tried with the 5.2.3 version and Dev branch but I have still the same problem with the z-index and Navbar. I get this : https://imgur.com/8Aqe3GG if the select is open and if I scroll, the z-index of the select is higher than the navber.

Damian Gemza staff commented 6 years ago

Dear Dragonblack, Unfortunately I can't see what's wrong on your img. Could you describe your problem one more time ? Or please provide more images / bigger images. Best Regards, Damian

Dragonnblack pro commented 6 years ago

I edited my answer. Actually, I fixed this bug by modifying the z-index of all my selects like Witold Tkaczyk said.....

Dragonnblack pro commented 6 years ago

Did you see the problem ???

Damian Gemza staff commented 6 years ago

You've said that you've fixed it by using solution posted by my friend Witek. Is there's still a problem ?

Add comment

Witold Tkaczyk free answered 6 years ago

0 0 Best answer

Hi, Dragonnblack,

I looked at your code and I saw this issue, unfortunately it seems that it's not lib related issue. I've isolated the use case on the fresh code and it's working fine. I suggest to try setup view again step by step and check at which point is it failing.

Regards

Dragonnblack pro commented 6 years ago

Hello, I've just downloaded your zip seed, and paste your example code. How can I be wrong ? is it possible to show me ? Regards,

Witold Tkaczyk free commented 6 years ago

Dear dragonnblack, I recommend you to download the full project from our npm install (PRO) instructions step by step and work with that. This should fix the problem. I supposed this issue is caused badly implement files. I saw in your code that you implement MDB Angular from ng-module and app folder both. In case of error appear, send me your new project to w.tkaczyk@mdbootstrap.com, I will take a look.

Dragonnblack pro commented 6 years ago

I have send my zip to w.tkaczyk@mdbootstrap.com Thank You

Witold Tkaczyk free commented 6 years ago

I run your project and still didn't get your issue. when I look at your code it seems that you install MDB Angular both from manual and npm installation what is wrong. Please install MDB Angular only using npm installation (PRO). Before this, you can try to rebuild your sass with this command: <code>npm rebuild node-sass --force</code>, then use <code>npm i</code> to make sure everything is ok if it won't help check your console for any errors and report me them here. Also, can have meaning that which web browser you use.

Dragonnblack pro commented 6 years ago

Thank you. Where can I get instructions to install pro version?

Witold Tkaczyk free commented 6 years ago

https://mdbootstrap.com/angular/5min-quickstart/ at npm installation section in “pro” overlap here: http://prntscr.com/h1cmqu

Add comment

Dragonnblack pro answered 6 years ago

0 0 Best answer

I've send some code to your address but I didn't got any answer. Did you receive it? Regards,

Dawid Adach pro commented 6 years ago

Dear Dragonnblack, I've sen you an email over the weekend regarding your question. We didn't receive the code, could you please try to send it again but this time directly to me? d.adach@mdbootstrap.com

Dragonnblack pro commented 6 years ago

Thanks, you should receive it now

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

Sorry, I cannot reproduce your error. Would you please send me some more code or even your package in order to investigate your error? You can send it to edabrowska@mdbootstrap.com

Dragonnblack pro commented 6 years ago

I would like send my code but "Your message to edabrowska@mdbootstrap.com couldn't be delivered."

Dawid Adach pro commented 6 years ago

Dear Dragonnblack, please send it to e.dabrowska@mdbootstrap.com , please note a dot between e & d at the beginning. Sorry for the typo.

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

Please tell me what version is the package you are using? Are you using the newest one? If not, please update your package and let me know if that helped.

Dragonnblack pro commented 6 years ago

I'm using the 4.3.2 (latest)

Add comment

Dragonnblack pro answered 6 years ago

0 0 Best answer

<table class="highlight tab-size js-file-line-container">
<tbody>
<tr>
<td id="LC5" class="blob-code blob-code-inner js-file-line"><div class="row"></td>
</tr>
<tr>
<td id="L6" class="blob-num js-line-number"></td>
<td id="LC6" class="blob-code blob-code-inner js-file-line"><div class="col-md-6"></td>
</tr>
<tr>
<td id="L7" class="blob-num js-line-number"></td>
<td id="LC7" class="blob-code blob-code-inner js-file-line"><mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select></td>
</tr>
<tr>
<td id="L8" class="blob-num js-line-number"></td>
<td id="LC8" class="blob-code blob-code-inner js-file-line"><label>Example label</label></td>
</tr>
<tr>
<td id="L9" class="blob-num js-line-number"></td>
<td id="LC9" class="blob-code blob-code-inner js-file-line"></div></td>
</tr>
<tr>
<td id="L10" class="blob-num js-line-number"></div></td>
<td id="LC10" class="blob-code blob-code-inner js-file-line"></td>
</tr>
</tbody>
</table>
I tried with this, the problem is the little triangle but also when it's dropdown, it start below and when I pick one it's gonna be wrong. It's not as the exemple

Please insert min. 20 characters.

<div class="row">
	<div class="col-md-6">
	<mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
	<label>Example label</label>
	</div>
</div>

I tried with this, the problem is the little triangle but also when it's dropdown, it start below and when I pick one it's gonna be wrong. It's not as the exemple

Er Ka free commented 6 years ago

Use mdb-ng-select. There is an error in documentation

Dragonnblack pro commented 6 years ago

I tried this but it tell me no html tag like this, and there is no rendering

Edyta Dabrowska free commented 6 years ago

Hi, There is no error in documentation. With 4.3.1 package version there have been some changes to the selectors.

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

Is the problem only the triangle at the right end? Could you please provide me with some code snippet from your site?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

Dragonnblack

Pro User 12Support score
3Questions 3Answers 0Snippets