Input fied with form-outline and btn-group

Michał Duszak staff commented 3 years ago

Hello, could you please create a snippet to reproduce your problem? Use 'create snippet' option here: https://mdbootstrap.com/snippets/

UNNdev pro premium priority commented 3 years ago

Create snippet on that page is broken, you cannot select any version.

Michał Duszak staff commented 3 years ago

@UNNdev try on incognito, or clear cache from your browser. Does this problem still exist?

henrotte pro premium priority commented 3 years ago

Hello,

Here is the snippet. It's the first time I use that so I don't understand why the content is not loaded by the btn-group but the code is the same that I have

https://mdbootstrap.com/snippets/standard/henrotte/3179554

Grzegorz Bujański staff commented 3 years ago

In the snippet you send you use d-none d-lg-block classes. This causes the inputs to be visible only at resolution ≥992px. Therefore, they are not visible on mobile devices.

henrotte pro premium priority commented 3 years ago

Hello,

Yes because in the mobile version, the content of div don't need to be shown. The web version is showing all but the mobile, there are buttons groups that need to be clicked to be shown.

Grzegorz Bujański staff commented 3 years ago

then what is the issue? In the snippet, after clicking on the buttons, nothing else appears and nothing is hidden behind them.

henrotte pro premium priority commented 3 years ago

Hello,

I updated the snippet, this version works for me apart from the inputs that still cause me problems

henrotte pro premium priority commented 3 years ago

Hello, I didn't seen your answer yesterday. If you look at the snippet I updated you can see the problem. If you click on one of the icons, the input field appears and the problem with the label too

Grzegorz Bujański staff commented 3 years ago

Look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3191275

I update part of the code where you try to update the input label. In this case, you should use this solution.

henrotte pro premium priority commented 3 years ago

Hello,

On your snippet, it works, but when I try it in my JS code, it doesn't. But I already don't understand one thing which is that the current snippet code that you can see works for me with btn-groups and navigation and it doesn't work in the snippet. I have to manage the d-none / d-block here while at home, it is automatically managed by the navigation with the data-section which opens the corresponding id. Could the fact that the codes do not work the same explain my problem?

Thank you

Grzegorz Bujański staff commented 3 years ago

I suppose there is some code in your project which is causing this problem. I checked this solution on a new project and it works the same as in the snippet.

henrotte pro premium priority commented 3 years ago

Hello,

I updated to version 3.9.0 and the problem is improving. Current, when I am in mobile version and that the inputs are hidden and that I click to display them, the label is always hidden by the border but when I put the focus on the field, the label is updated.

How can I improve so that the update of the inputs is done directly?

Thanks

Grzegorz Bujański staff commented 3 years ago

If I understand correctly, you mean updating the inputs after their appearance? See the snippet I prepared for you. There is a JS code added, which causes the inputs to be updated after clicking on the button.