Topic: Input fied with form-outline and btn-group
Hello,
I have a problem with the inputs-floating-label which only occurs on the smaller responsive versions. On the web version, everything works perfectly but in the mobile version, my fields are displayed behind btn-groups. So when the form is displayed directly, everything is displayed correctly, but when the fields are displayed when clicking on the btn-group, I cannot update the field to correct the size of the empty space for the label.
Do you have a solution?
Thank you
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.2.0
- Device: PC
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No
Michał Duszak staff commented 4 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 4 years ago
Create snippet on that page is broken, you cannot select any version.
Michał Duszak staff commented 4 years ago
@UNNdev try on incognito, or clear cache from your browser. Does this problem still exist?
henrotte pro premium priority commented 4 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.