CSS конфликт - позиция: абсолютная в ExtJs Grid

Question

Недавно я интегрировал ExtJs Grid в существующую веб-страницу и привел к конфликту CSS.Я идентифицировал конфликтующий CSS в моей существующей таблице стилей.К сожалению, я не могу изменить свою текущую таблицу стилей, так как весь веб-сайт построен поверх этого.

Я пытался использовать ctCls , baseCls , bodyCfg , bwrapCssClass и bodyCssClass , но не сработало, как ожидалось.

Ниже приведена противоречивая таблица стилей моего существующего веб-сайта

div
{
font-weight: bold;
font-size: 12px;
visibility: visible;
font-family: Arial, sans-serif;
white-space: nowrap;
position: absolute;
}

Стиль позиция: абсолютный вызывает конфликт.Я пробовал переопределение CSS, но не работает должным образом.

Обратите внимание: установка стиля position: относительный для каждого тега DIV в отображаемой сетке может решить эту проблему.Я смоделировал это, используя панель инструментов разработчика IE.

Может кто-нибудь помочь мне, как я могу установить это для визуализированной сетки, чтобы я мог успешно переопределить позицию : абсолютную стиля CSS главной страницы с позицией :родственник .

Кто-нибудь сталкивался с подобной проблемой?Могу ли я успешно переопределить CSS?Любая помощь будет оценена.

Спасибо

Answer 1

Не думаю, что было бы неплохо устанавливать стили CSS таким универсальным образом для ВСЕХ <div> -элементов на странице.Но хорошо ... Вы можете попытаться переопределить настройки, используя следующее правило CSS:

.x-grid3,
.x-grid3 div {
    font-weight: normal;
    position: static;
}

Answer 2

У меня была такая же проблема с моим веб-проектом, и я долго искал решение. Проблема в том, что два элемента используют один и тот же Css в одном и том же frame . Таким образом, лучший способ избежать конфликта - рендерить вашу панель сетки в другой фрейм (всегда на одну и ту же страницу). Вы можете использовать Управляемое расширение пользователя IFrame или uxmedia . Я использую расширение uxmedia. Чтобы создать iFrame в uxmedia:

var htmlViewer = new Ext.ux.ManagedIFrame.Panel({  

    border  : false,

    title   : title,

    header: header,

    region:'center',

    iconCls : iconCls,

        // Here your Grid Panel comes within an url from server side
    defaultSrc : urlAddress
        });