Select flicking several times until properly show


Topic: Select flicking several times until properly show

newtongamajr pro asked 5 years ago

Expected behavior

When I click on the select, it shows the options

Actual behavior

I click on the select, the options flashes on the screen and disappear... After a few clicks it stops flashing and properly show.

Resources (screenshots, code snippets etc.)

The page that I'm talking about is online now at the link: maonaroda.com/empresa-de-pintura.html


Mateusz Łubianka staff answered 5 years ago

@newtongamajr,

All right, now i see what you mean. The select works well, it's 'uder' other element becouse of .view class on parent element. Try to change this:

<header>
<div class="d-flex align-items-center justify-content-center view view-landingpage">

Into:

<header>
<div class="d-flex align-items-center justify-content-center">

Best,


newtongamajr pro commented 5 years ago

Now all is working propperly.

I am very grateful.

Best,


Mateusz Łubianka staff commented 5 years ago

I'm glad everything works well.

Best,


Mateusz Łubianka staff answered 5 years ago

Hi @newtongamajr,

Check out our docs. There is an example of form with select. https://mdbootstrap.com/docs/jquery/forms/basic/#contact-form It works well here, so you can use this form and customize it. If it won't work please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


newtongamajr pro commented 5 years ago

I explained in the other message the initial problem and the second problem that I found later... So this is the snippet off the page: https://mdbootstrap.com/snippets/jquery/newtongamajr/1663518 (some references and links not work, but if you want to see it online in: https://maonaroda.com/empresa-de-pintura.html


newtongamajr pro answered 5 years ago

I will submit a snippet because it presents another error too. Explaning: -Besides the error of "select flashing", they are show below other elements, like on this screenshot below.

Select overlaid by the body of the page


Mateusz Łubianka staff commented 5 years ago

@newtongamajr,

Check it out: https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1664434?action=forum_snippet I used your form code and I think it works well. Maybe you use some custom functions and that is a issue?

Best,


newtongamajr pro commented 5 years ago

The problem is the version of my project... If you change the version of your snippet to 4.7.1 it will have the same behavior.


Mateusz Łubianka staff commented 5 years ago

It could be the problem with selects in this version. In new versions it works well. Try to use latest version.


newtongamajr pro commented 5 years ago

I have changed the version of this page and now it works! But the second problem (select appearing under other elements) stil happening, even in the newest version.

PS: As it is not possible attach an image in this type of answer, I will attach an image showing the problem in another


newtongamajr pro answered 5 years ago

The attachment that I talk about in my previous message is below.

Link to the page with the problem: https://maonaroda.com/empresa-de-pintura

Snippet of same page: https://mdbootstrap.com/snippets/jquery/newtongamajr/1680103

Screenshot showing the problem:

enter image description here


Mateusz Łubianka staff commented 5 years ago

I tried to use your example: https://streamable.com/xd2oh Doesn't it work well?

Best,


newtongamajr pro commented 5 years ago

No! It is working in your video because there ir no element near the select (probably because of your monitor resolution).

If you zoom in the page or remove paddings/margins (that I added to increase the space and work arround the problem) you will see that the select do not shows properly. It appear under other elements, like in my screenshots.


newtongamajr pro commented 5 years ago

In fact, to make the problem easier to see, in my 1st screenshot I have changed the background color of the next section.

Link: https://usercontent.mdbootstrap.com/mdb-images/support/a06ab7f2-4d31-43ef-a22d-e33dcdc91619-Anota%C3%A7%C3%A3o%202020-01-22%20005156.jpg


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.1
  • Device: Notebook
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No