Датчик кендо с тремя указателями Выравнивание 3 датчиков друг над другом Проблемы

Поэтому я попытался скопировать бесчисленное количество других сообщений о выравнивании датчиков и элементов div друг над другом с использованием z-index и позиционирования, но до сих пор мне это не удалось. В настоящее время у меня есть это (я тестировал в IE и Chrome с одинаковыми результатами):

<div id="gauges">
    <div id="loggedInGauge">  //gauge creation code  </div>
    <div id="loggedOutGauge"> //gauge creation code </div>
    <div id="onBreakGauge">   //gauge creation code </div> 
</div>
<style>

             #gauges {
                position: relative;

            }
            #loggedInGauge, #loggedOutGauge, #onBreakGauge {

                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                width: 200px;
                height: 200px;    
            }

            #loggedOutGauge {

                z-index: 10;
            }
            #onBreakGauge {
                z-index: 20;
            }

</style>

Может ли кто-нибудь помочь расположить датчики друг над другом так, чтобы это выглядело как один датчик с тремя стрелками?

Вот текущий вывод: ссылка Imgur на текущий вывод


asp.net razor gauge kendo-ui
person user2248441    schedule 12.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Измените определение CSS на:

#loggedInGauge, #loggedOutGauge, #onBreakGauge {
    position: absolute !important;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 200px;
    height: 200px;    
}

Пользовательский интерфейс кендо определяет положение каждого gauge как относительное, перезаписывая ваше определение. Добавив к нему ! important, мы предотвратим это.

Пример здесь: http://jsfiddle.net/OnaBai/wNsRY/

person OnaBai    schedule 12.04.2013
comment
Спасибо! Наверняка это должно быть в документации по кендо? Может быть, и я просто пропустил это, но это должно быть там. Единственная проблема, которая возникла при использовании этого, заключается в том, что div контейнера датчика теперь перепутался там, где он появляется на экране. На этом изображении показано, что я имею в виду. Кстати, сайт выглядит таким хламом, потому что я пытаюсь отсортировать диаграммы, прежде чем верстать остальную часть страницы :) - person user2248441; 12.04.2013
comment
На самом деле мое предлагаемое решение должно быть (и я уверен, что оно есть) в руководствах по CSS, поскольку я проверил сгенерированный код и заставил то, что я хочу. Проблема, которая у вас есть сейчас, связана с тем, что контейнер (gauge div) не знает о своем размере :-( Вы можете определить height в gauge CSS принудительно его размер. См. stackoverflow.com/a/8463686/1802671. - person OnaBai; 12.04.2013
comment
С моей точки зрения, фактические решения будут поддерживать массив указателей, что легко выполнимо, но зависит от того, сколько людей будет заинтересовано в его реализации или нет. - person OnaBai; 12.04.2013