Search code examples
javascripttwitter-bootstraptabscodemirror

Code Mirror only displays after a user clicks on it when integrated into a Bootstrap tab


I am having an issue with integrating Code Mirror into a Bootstrap tab.

The problem is that because the Bootstrap tab is not set to active, code mirror will only display the content if the user clicks on it.

I have thoroughly searched a solution for the problem but have not found anything that works (possibly due to my knowledge about JavaScript not being very good). I have tried things like telling codemirror to refresh, but it doesn't solve the problem.


Solution

  • Calling .refresh() on the editor is what is needed here. You just have to make sure you do it after the editor actually becomes visible. I am not sure how to do this with Bootstrap tabs, but I'm sure there is some way to listen to tab change events.