Responsive Modal (simple and Bootstrap5) - cannot get to function like examples
Responsive Modal (simple and Bootstrap5) - cannot get to function like examples
glimpsed_chaos
Posts: 140Questions: 30Answers: 4
I've tried several implementations using the Responsive Modal setup. I cannot seem to get any of them to work.
I have built a codepen using the same JavaScript, HTML and CSS in the example for Bootstrap 5. But the modal ability does not work. I get no button to the left, no modal pop up.
I also tried a "Immediately show hidden details" setup with no luck either. I get no immediately shown hidden details. No pen for that as I modified the one I have to try the Bootstrap 5 option.
I have to be doing something incorrectly, but I cannot see what that is as I am following the examples.
I was sure to setup 2 hidden columns to be sure there was data to display.
This question has accepted answers - jump to:
Answers
Your codepen works for me. Reduce screen width, buttons appear, click button, modal appears showing details of hidden columns.
I see that now, I did not understand that part but I had to shrink my screen to such a small width it's not usable.
So, is this an option that is not for desktop use but more mobile?
Or, for what I need, how can I implement this at full screen? Essentially, I want the user to be able to click and see more detail regardless of screen width. (I know how to implement child rows but want to use a modal in this case.)
Responsive doesn't work like that.
Sounds like child rows would be more appropriate for you. I believe child rows can be displayed in a modal, but i couldn't tell you how. Sorry.
Appreciate the clarification. Basically 'Responsive Modal' is not what I need. But a modal is appropriate, probably with a click or double-click event on the row to show the data. I was trying what I thought was what I was looking for and came up in the search.
This example shows how to get the data for the clicked row.
Kevin