Topic: row col formatting fails when div is hidden or shown
Expected behavior
layout of the row/col is maintained, regardless whether it is hidden or shown.
Actual behavior
layout of the row/col is not maintained. see attached snippet.
choose one of the event types. Type Three will hide the second row, the other choices will show the second row. the second row looses its layout when shown. ie:
item1 item2
becomes:
item1
item2
is there a way when element.style.display = "block" is set to have it recalculate arrangement?
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/wilbur/5753513
I've edited your snippet to work properly: https://mdbootstrap.com/snippets/standard/kpienkowska/5758034
You should use styling classes not inline styles.
dwilbur pro premium priority commented a year ago
so after a bit of research your referring to this https://getbootstrap.com/docs/5.3/utilities/display/ ?
also, would this have been a better solution to https://mdbootstrap.com/support/standard/select-field-rendering-incorrectly/
Kamila Pieńkowska staff commented a year ago
Here is a docs page with display options: https://mdbootstrap.com/docs/standard/layout/display/
It may be a solution to your previous question depending on the situation.
If select wasn't present/visible on the page load update method still is going to be necessary.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.2
- Device: na
- Browser: na
- OS: na
- Provided sample code: No
- Provided link: Yes