Отменить Наследование Css

[Dragon108]

Есть поле в XPage - типа ComboBox. К нему применяется Style Class как и ко всем остальным полям на пейдже. Во всех полях стиль срабатывает, за исключением этого одного поля ComboBox. Прописывал в параметр style этого поля параметры стиля , ставил у параметров !important - ничего не помогает: поле css не ест
Помогите советом? Сильно камнями не кидать, особо версткой и веб-дизайном не занимаюсь

 

[lmike]

используйте отладчик в ФФ (или хроме) там можно детально поиграться со стилями на странице, для различных элементов...
в русском ФФ - "исследовать элемент", в контекстном меню, на странице браузера

 

[lmike]

картинка со стилями (справа)

 

[Dragon108]

картинка со стилями (справа) Посмотреть вложение 5683

Нашел корневую тему, берется откуда то отсюда
<сервер>l/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&@Da&@Ib&@Th&@Ti&2TgxspSF.css.css

Но где этот файл (или вообще что это) находится ... ума не приложу

 

[lmike]

дело в активных атрибутах, те, кот. перекрываются - зачеркнуты в отладчике
надо увидеть - какие имена наследуются попробовать поменять их налету и посмотреть на эффект

 

[Dragon108]

дело в активных атрибутах, те, кот. перекрываются - зачеркнуты в отладчике
надо увидеть - какие имена наследуются попробовать поменять их налету и посмотреть на эффект

Если можно - отсюда поподробнее
<сервер>l/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&@Da&@Ib&@Th&@Ti&2TgxspSF.css.css - отсюда не перечеркивается ни один из атрибутов, я так понял они и наследуются и перекрывают накладываемый стиль.

P.S. Задача на самом деле довольно простая - надо у поля типа Check Box сделать обводку поля не стандартным серым а синим.

 

[lmike]

выделяем на странице элемент (ваш чекбокс) сморим его атрибуты, в навигаторе дебагера...

Добавлено: если сайт публичный - можно ссылку на тестовую страницу здесь дать

 

[Dragon108]

выделяем на странице элемент (ваш чекбокс) сморим его атрибуты, в навигаторе дебагера...

Добавлено: если сайт публичный - можно ссылку на тестовую страницу здесь дать

Сайт не публичный - в интранете.

Спасибо. разобрался - получилось. (стили перекрывались более верхним стилем - прописал !important прямо в параметре style элемента check box.) Работает везде, кроме того где нужно - в IE8 ... придется копать дальше

 

[Andre]

А отключить использование темы для combobox не спасает ?

<xp:comboBox id="comboBox1" disableTheme="true"></xp:comboBox>

 

[Dragon108]

А отключить использование темы для combobox не спасает ?

<xp:comboBox id="comboBox1" disableTheme="true"></xp:comboBox>

это пробовал., причем по всякому. к сожалению, нет :maybe:

 

[NickProstoNick]

А может автор напишет, что он хочет получить?

 

[Dragon108]

А может автор напишет, что он хочет получить?

Автор уже писал

P.S. Задача на самом деле довольно простая - надо у поля типа Check Box сделать обводку поля не стандартным серым, а синим.

В Хроме и Мозилле - работает (писал выше как), в IE 8 никак не хочет

 

[lmike]

в осле - надо смореть какие оно css поддерживает (у МС вечно с подвыпердами)

Добавлено: ЗЫЖ чтобы не морочится - окружить дивом и задать ему цвет, а самому чекбоксу - убать бордеры типа
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;


Добавлено: еще вариант - сделать это в dojo скрипте

 

[Dragon108]

Добавлено: еще вариант - сделать это в dojo скрипте

расскажите, пожалуйста, как. Был бы рад ссылке

 

[lmike]

Ссылка скрыта от гостей

может натолкнуть на стили
а скрипт dojo.byId(id).style...="";

Добавлено: есть еще нюанец - если чекбоксы рисуют картинкой (в хэПагах), но здесь я не знаю

 

[NickProstoNick]

Автор уже писал

P.S. Задача на самом деле довольно простая - надо у поля типа Check Box сделать обводку поля не стандартным серым, а синим.

В Хроме и Мозилле - работает (писал выше как), в IE 8 никак не хочет

Прошу прощения, но не нашел описания от автора. Ни слова.
Одни пишут про чекбокс, другие про комбобокс.
Для чекбокс/груп css такой
<!--shcode--><pre><code class='css'>.xspCheckBox{
border: 1px blue solid;
}
.xspCheckBox table{
border: none;
}[/CODE]

Для комбобокса. Первая строка для нормальных браузеров, вторая для IE, но результат не очень
<!--shcode--><pre><code class='css'>.xspComboBox{
border: 1px red solid;
filter: progidXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=green)
progidXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2,color=green);
}[/CODE]
или в событии beforeRenderResponse страницы прописать это. Результат отличный. Это даже вылечит расплывание диалоговых окон extlib
<!--shcode--><pre><code class='java'>if (context.getUserAgent().isIE()) {
var response = facesContext.getExternalContext().getResponse();
response.setHeader("X-UA-Compatible", "IE=10");
}[/CODE]
тогда для IE будет работать даже так
<!--shcode--><pre><code class='css'>.xspComboBox{
border: 1px red solid; /* Если используется какая-то из тем OneUI то надо добавить !important */
}[/CODE]

 

[lmike]

я интерпретировал как именно сам чекбоксы, с ними действительно - не так всё просто
м.б. я и ошибался

 

[NickProstoNick]

я интерпретировал как именно сам чекбоксы, с ними действительно - не так всё просто
м.б. я и ошибался

Ну для самого чекбокса тоже не особо сложно, но в Xpages немного геморрно. Нужно сделать следующее:
ставишь чекбокс. убираешь у него Label. Ставишь отдельный Label и привязываешь его к чекбоксу. Пишешь CSS и радуешься
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код страницы</div></div><div class="sp-body"><div class="sp-content">

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
<xp:styleSheet href="/mycss.css"></xp:styleSheet>


</xp:this.resources>
<xp:this.beforeRenderResponse><![CDATA[#{java script:if (context.getUserAgent().isIE()) {
var response = facesContext.getExternalContext().getResponse();
response.setHeader("X-UA-Compatible", "IE=10");
}}]]></xp:this.beforeRenderResponse>

<xp:br></xp:br>
<xp:checkBox id="checkBox1"></xp:checkBox><xp:label id="label1" for="checkBox1" value="Метка"></xp:label>

<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>

<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="Untitled"></xp:selectItem>
<xp:selectItem itemLabel="Untitled"></xp:selectItem>
<xp:selectItem itemLabel="Untitled"></xp:selectItem>
<xp:selectItem itemLabel="Untitled"></xp:selectItem>
</xp:comboBox></xp:view>

<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">CSS</div></div><div class="sp-body"><div class="sp-content">

.xspCheckBox {
display:none;
}
.xspCheckBox + label{
display:inline-block;
width:26px;
height:26px;
margin:-1px 4px 0 0;
padding: 6px 0 0 30px;
vertical-align:middle;
background:url(./checkbox_2.png) left top no-repeat;
cursor:pointer;
}
.xspCheckBox:checked + label {
background:url(./checkbox_1.png) left top no-repeat;
}

.xspComboBox{
border: 1px red solid;
}

Картинки в ресурсы:

Результат:


Правда в IE8 это не работает. Этот "браузер" не понимает события checked
Это событие включили в IE9

 

[lmike]

Правда в IE пока еще не получилось

- вот об этом и речь

 

[lmike]

нашел прикольную скриптовую версию

Ссылка скрыта от гостей

Добавлено: единственно - jquery а не dojo