Use of wild card definition in Bootstrap style sheet

This morning I was working on refining presentation of my web application for final release to public. As part of process I am introducing standard libraries like jQuery, Bootstrap, jQuery UI etc. in my application to provide a smooth user interface that works across browsers and devices. After I introduced Bootstrap.css style sheet into my application, on one of the pages, jQuery tab view broke. The inner content of tabs is dynamically refreshed using AJAX requests on a fixed timer. I noticed that inner content of tabs was displaying outside the boundary of tabs container. I had noticed similar behavior during initial development. It was being caused by some floating din in tab container. I had fixed all those issues. It was all working till I started using Bootstrap style sheet. I inspected all elements and there was no element that could break the structure.

After banging my head with this issue, I tried to reproduce the issue by using static content for all tabs. The things were still working fine. Then I started putting class names on each element in the content as was being done by AJAX implementation of my grid UI. Moment I introduced one of the class names, the problem started happening. When I looked at my application's style sheet, I found that I did not even have a style with that name in my style sheet, This was just weird behavior. This is where Chrome browser's Inspect element feature came to my rescue. I found that the effect style being applied ob my div came from bootstrap. My class name was eventspanel. And look at the following wild card definition in Bootstrap.css file.

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

Browser applied that style to my DIV because it has word span in it. Once I renamed by class name to eventpanel things came back to normal. Some time regular expression and wild card uses can introduce issues that can be hard to debug.

comments powered by Disqus

Blog Tags