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

Тема в разделе "Lotus - Xpages", создана пользователем Dragon108, 17 июн 2013.

  1. Dragon108

    Dragon108 Well-Known Member

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

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    используйте отладчик в ФФ (или хроме) там можно детально поиграться со стилями на странице, для различных элементов...
    в русском ФФ - "исследовать элемент", в контекстном меню, на странице браузера
     
  3. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    картинка со стилями (справа) Снимок_экрана_от_2013_06_17_16_22_04.png
     
  4. Dragon108

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    Нашел корневую тему, берется откуда то отсюда
    <сервер>l/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&@Da&@Ib&@Th&@Ti&2TgxspSF.css.css

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

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    дело в активных атрибутах, те, кот. перекрываются - зачеркнуты в отладчике
    надо увидеть - какие имена наследуются попробовать поменять их налету и посмотреть на эффект
     
  6. Dragon108

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    Если можно - отсюда поподробнее :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 сделать обводку поля не стандартным серым а синим.
     
  7. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    выделяем на странице элемент (ваш чекбокс) сморим его атрибуты, в навигаторе дебагера...

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

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    Сайт не публичный - в интранете.

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

    Andre Well-Known Member

    Регистрация:
    29 июл 2004
    Сообщения:
    108
    Симпатии:
    0
    А отключить использование темы для combobox не спасает ?

    Код (Text):
    <xp:comboBox id="comboBox1" disableTheme="true"></xp:comboBox>
     
  10. Dragon108

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    это пробовал., причем по всякому. к сожалению, нет :maybe:
     
  11. NickProstoNick

    NickProstoNick Статус как статус :)

    Регистрация:
    22 авг 2008
    Сообщения:
    1.766
    Симпатии:
    39
    А может автор напишет, что он хочет получить?
     
  12. Dragon108

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    Автор уже писал :)

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

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

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    в осле - надо смореть какие оно css поддерживает (у МС вечно с подвыпердами)

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


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

    Dragon108 Well-Known Member

    Регистрация:
    19 янв 2010
    Сообщения:
    264
    Симпатии:
    0
    расскажите, пожалуйста, как. Был бы рад ссылке
     
  15. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    это может натолкнуть на стили
    а скрипт dojo.byId(id).style...="";

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

    NickProstoNick Статус как статус :)

    Регистрация:
    22 авг 2008
    Сообщения:
    1.766
    Симпатии:
    39
    Прошу прощения, но не нашел описания от автора. Ни слова.
    Одни пишут про чекбокс, другие про комбобокс.
    Для чекбокс/груп 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]
     
  17. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    я интерпретировал как именно сам чекбоксы, с ними действительно - не так всё просто
    м.б. я и ошибался
     
  18. NickProstoNick

    NickProstoNick Статус как статус :)

    Регистрация:
    22 авг 2008
    Сообщения:
    1.766
    Симпатии:
    39
    Ну для самого чекбокса тоже не особо сложно, но в 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">
    Код (Text):
    <?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">
    Код (Text):
    .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
     
  19. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    - вот об этом и речь :)
     
  20. lmike

    lmike нет, пердело совершенство
    Команда форума Lotus team

    Регистрация:
    27 авг 2008
    Сообщения:
    6.082
    Симпатии:
    300
    нашел прикольную скриптовую версию http://damirfoy.com/iCheck/

    Добавлено: единственно - jquery а не dojo
     
Загрузка...

Поделиться этой страницей