0

I am working on a CQ 5.5 project. And for the UI I have used Bootstrap CSS 2.3.2(I'm not using the latest bootstrap because it doesn't support the use a DataTables- A table that has a search tab and pagination support). Whenever I use bootstrap in CQ the UI of the side kick gets disturbed On Mozila

Also when I enabled all features of Rich Text Editor, dragged it and clicked on "Source code Edit" I am not able to edit the dataRich Text Editor Note: The rich text editor is dragged on a Modal(drop down).

There are many such glitches that I have faced. Why does this happen? Does this happen because the parsys, head.jsp or Global imports its own CSS and the Classes of the CSS clash? Any suggestions on how to solve this?

cvrebert
  • 9,075
  • 2
  • 38
  • 49
Oliver
  • 6,152
  • 2
  • 42
  • 75
  • The Rich Text Editor works fine on parsys that lies on the page. But doens't respond when dragged on parsys that lies on the Modal(drop down). I think there is something called a Z-index could that be the problem? How do I solve this? – Oliver Jun 28 '14 at 15:49

1 Answers1

1

Yes. It is because the CSS definition in bootstrap clashes with CQ's default style definitions.

Though CQ has defined its style specific to the content that appears only within the with id CQ, bootstrap on the other hand has defined it for the element.

For e.g., considering the label of the components that isn't displayed properly in the image you have posted, CQ provides class names to the elements and defines the style as follows

#CQ .x-form-item label.x-form-item-label {
    // css definition
}

whereas bootstrap has defined the style for the label as follows

label {
    display: block;
    margin-bottom: 5px;
}

Thus both the styles apply to the same element breaking your layout.

You might need to modify your bootstrap CSS a bit. There is a similar question which has the solution you might be interested in.

Community
  • 1
  • 1
rakhi4110
  • 9,253
  • 2
  • 30
  • 49
  • I used something called as CSS Name spacing. You have always come to my rescue @rakhi4110 Thank you very much. – Oliver Jun 28 '14 at 17:55
  • Rakhi This solved the UI part but can you please tell me if adding a names space like bootstrap to every element that uses bootstrap CSS would affect the JS as well. Because I know that the JS pics up elements with specific CSS class names. then now will the JS also have to pick up a class with 'bootstrap' prefix? How do I do this, please help? – Oliver Jun 28 '14 at 18:03
  • I don't think that would cause an issue, as we are adding only a new class. All the existing JS functionality shouldn't be affected coz of that. – rakhi4110 Jun 28 '14 at 18:08
  • I haven't tried but I just hope it is as you said. I'll update here if it works or not. – Oliver Jun 28 '14 at 18:30