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

Dragon108

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

lmike

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#2
используйте отладчик в ФФ (или хроме) там можно детально поиграться со стилями на странице, для различных элементов...
в русском ФФ - "исследовать элемент", в контекстном меню, на странице браузера
 

Dragon108

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

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

lmike

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#5
дело в активных атрибутах, те, кот. перекрываются - зачеркнуты в отладчике
надо увидеть - какие имена наследуются попробовать поменять их налету и посмотреть на эффект
 

Dragon108

Well-known member
19.01.2010
265
0
#6
дело в активных атрибутах, те, кот. перекрываются - зачеркнуты в отладчике
надо увидеть - какие имена наследуются попробовать поменять их налету и посмотреть на эффект
Если можно - отсюда поподробнее :rolleyes:
<сервер>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

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#7
выделяем на странице элемент (ваш чекбокс) сморим его атрибуты, в навигаторе дебагера...

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

Dragon108

Well-known member
19.01.2010
265
0
#8
выделяем на странице элемент (ваш чекбокс) сморим его атрибуты, в навигаторе дебагера...

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

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

Andre

Well-known member
29.07.2004
108
0
#9
А отключить использование темы для combobox не спасает ?

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

Dragon108

Well-known member
19.01.2010
265
0
#12
А может автор напишет, что он хочет получить?
Автор уже писал :)

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

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

lmike

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#13
в осле - надо смореть какие оно css поддерживает (у МС вечно с подвыпердами)

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


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

lmike

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#15
это может натолкнуть на стили
а скрипт dojo.byId(id).style...="";

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

NickProstoNick

Статус как статус :)
Lotus team
22.08.2008
1 809
21
#16
Автор уже писал :)

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: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=green)
progid:DXImageTransform.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

нет, пердело совершенство
Lotus team
27.08.2008
6 586
272
#17
я интерпретировал как именно сам чекбоксы, с ними действительно - не так всё просто
м.б. я и ошибался
 

NickProstoNick

Статус как статус :)
Lotus team
22.08.2008
1 809
21
#18
я интерпретировал как именно сам чекбоксы, с ними действительно - не так всё просто
м.б. я и ошибался
Ну для самого чекбокса тоже не особо сложно, но в 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;
}
Картинки в ресурсы:
checkbox_1.png checkbox_2.png
Результат:
rez.jpg

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

Вложения