2011-05-05 4 views
0

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

Я попытался с помощью 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, но не работает должным образом.

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

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

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

Благодаря

+0

Возможно ли предоставить страницу с сеткой. Чтобы мы могли попытаться увидеть это в firebug. tnx –

ответ

2

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

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

Нет! Это не работает. Я также пробовал пару других классов css. Есть ли какой-либо механизм в CSS, который позволяет игнорировать определенную позицию стиля: абсолютный из таблицы стилей главной страницы при рендеринге? Я пробовал значение, но не использовал. :( – abhilashca

+0

Флаг называется '! Important'. Но вы должны использовать Firebug (или какой-либо другой инструмент для разработки), чтобы проверить, какие стили применяются к элементу и которые были переопределены. –

+0

Привет, спасибо за исправление (! Important). Мне удалось переопределить css, добавив стиль в файл cs ext-all. 'code'div {position: relative;}' code ' Но это проблема с фиксированной сеткой, но вызвала некоторое семейство шрифтов и шрифт -размерные проблемы, так как мой мужественный стиль для DIV имеет те стили, которые были определены. На данный момент это нормально. Но я ищу лучшее решение параллельно.Спасибо за помощь :) – abhilashca

0

У меня была такая же проблема с моим веб-проекта, и я искал долго, чтобы найти решение. Проблема состоит в том, что два элемента используют один и тот же Css в том же кадре. Таким образом, лучший способ избежать конфликта - это превратить вашу панель грида в другой кадр (всегда на одну страницу). Вы можете использовать Managed IFrame user extension или 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 
     }); 
Смежные вопросы