Control layouts change when including Bootstrap

0
0

Hi,

I’ve come across some odd behaviour when including Bootstrap content into a HTMLPanel.

In the attached project, when I load HTML text into the HTMLPanel without any Bootstrap included, everything works just fine.  If I then clear the HTMLPanel text and then load the panel with Bootstrap content, the treeview nodes and text in the buttons appear to reposition when hovering the mouse over each item and the HTML panel won’t display all the text until the screen is physically resized.  If I then clear the text from the panel, all the tree nodes and button text reposition back to their original place.

Not a showstopper but if you have any tips on getting around this that would be great!

Thank you

Attachment
WebApplication28.zip
General
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Bootstrap applies the line-height to the body tag. When using an HtmlPanel the html is in the same document and if the css changes element types it can override any wisej or application style. When the css is applied to the HtmlPanel through wisej, all the rules are encapsulated and isolated to work only on the elements in the panel.

In this case the Bootstrap css changes the line-height of the body. If you change your Default.html like below it should work:

<body style=”line-height:1.2″>

 

  • Andrew Hills
    Thanks for that suggestion but that change only seemed to work sometimes. I stripped out all the other HTML tags and only applied the table object and it would work once, but then I run it again and it did the same thing. Very strange. I tried adding the bootstrap min.css file directly into the HtmlPanel CSS and StyleSheetSource properties but similar result. Can the body line height be applied after loading up the application?
  • Luca (ITG)
    The css cannot override the style attribute unless it’s !important. Try adding this body{line-height:1.2 !mportant;} inside . If it doesn’t work, can you give me the steps to reproduce with your sample app?
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.