Search code examples
javascriptcssaemtwitter-bootstrap-2

Disturbed UI in CQ5?

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?

Solution

  • 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.