Switch not showing after being removed from filtering data

Topic: Switch not showing after being removed from filtering data

xmenus free asked 6 years ago

Hi,

Switch not working after being removed! For example I'm using it in ReactTable once I filter and clear the filter, I see the html (through inspect element) that proper html tags and classes are not regenerated as during first runtime therefore it shows nothing until the whole page is refreshed again!

Any hint?

<div class="switch">
    <label>
      <input type="checkbox" checked>
      Wi-Fi
    </label>
  </div>

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi xmenus,
Thanks for providing the code! The situation you presented seemed rather unusual, as <code>switch</code> is, in fact, a straight-forward (not to say "dead-simple") CSS feature and there seem to be no reason for it to not appear within a table.
<a href="https://mdbootstrap.com/wp-content/uploads/2018/02/Selection_043.png"><img src="https://mdbootstrap.com/wp-content/uploads/2018/02/Selection_043.png" alt="" width="1034" height="433" /></a>
It seems that React Table wraps table data content inside a <code></code>. After getting rid of the filter, the table cells get back to normal, except the said wrapper is gone: 
<a href="https://mdbootstrap.com/wp-content/uploads/2018/02/Selection_044.png"><img src="https://mdbootstrap.com/wp-content/uploads/2018/02/Selection_044.png" alt="" width="931" height="276" /></a>
Note, that <code>.switch</code> is there - what is missing is a React Table utility most probably necessary to display it. I guess the issue is something worth forwarding to the <a href="https://github.com/react-tools/react-table" rel="nofollow">source</a>.
With Best Regards, 
Kuba

Please insert min. 20 characters.

Hi xmenus,

Thanks for providing the code! The situation you presented seemed rather unusual, as switch is, in fact, a straight-forward (not to say "dead-simple") CSS feature and there seem to be no reason for it to not appear within a table.

It seems that React Table wraps table data content inside a . After getting rid of the filter, the table cells get back to normal, except the said wrapper is gone:

Note, that .switch is there - what is missing is a React Table utility most probably necessary to display it. I guess the issue is something worth forwarding to the source.

With Best Regards,
Kuba

xmenus free commented 6 years ago

Since the class 'bmd-form-group' was missing I assumed that it could be a problem with mdb bootstrap JS but maybe it's an issue with ReactTable. Thank you for your support! Best Regards

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi there xmenus,

Thanks for contributing to the support forum with your question! Please help us better understand your use-case for switch - what is it's purpose inside the table? Could you perhaps provide a working example on JSfiddle or Codepen so we could inspect it? Without it there are not many hints I can provide, maybe except the fact that switch has not been tested as a composite solution inside of ReactTable and, well, that using it without a .lever is rather uncommon.

With Best Regards,
Kuba

xmenus free commented 6 years ago

Thank you for your fast reply! Please use the link below to open the example. Search in the "Name" field, then clear the filter and see the "Active" field , "Switch" controls don't appear again until you refresh the page?! https://stackblitz.com/edit/react-umdw82?embed=1&file=index.js

xmenus free commented 6 years ago

I assume the same might happen outside react world in similar cases when you might do some server side filtering and part of the DOM is removed temporary! Will your code catch it again and recompile to re-generate necessary classes! This is just an assumption, I didn't have a real case so please ignore it if not valid! Thanks & Regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

xmenus

0Support score
1Questions 0Answers 0Snippets