I have a dashboard with several bootstrap cards where each card has children. In each card header, I added a maximize button (green square) as shown in this screenshot. what I want to do is that when I click the maxmize button of a specific card, it should be maximized to the full container. I first tried to COPY the content of the card to an empty modal when the max button is clicked. However, it gave an error of duplicated elements in the layout. Then, I tried to MOVE the contents from card to modal and then I move the contents back to the card from the modal when the model is closed. I have several issues with this approach.
- it is complicated
- it keeps throwing this error "Multiple objects were found for an
Inputof a callback that only takes one value" - it doesn't show consistent performance on different browsers. For example on Chrome, I have to click the max button 2 times to make it work. However, in safari, only one click is enough but it gives the above-mentioned error.
So, I think I am following the wrong approach and I believe that it should be a simpler way to maximize a card in a bootstrap container, right?
Any ideas?
