Изменение размера окна с несколькими объектами KoGrid устанавливает нулевую ширину любых скрытых KoGrids

Question

Изменение размера окна с несколькими объектами KoGrid устанавливает нулевую ширину любых скрытых KoGrids

0

Это, вероятно, простой вопрос для эксперта CSS (или, может быть, KoGrid) (которого я не являюсь). Параметр - это веб-страница, использующая Knockout и JQuery с когерями "один ко многим". Только одна из них - это "дисплей: блок" за раз. Все остальные - "дисплей: скрытый".

Когда пользователь изменяет размеры своего окна браузера, скрытые сетки получают ширину своих полей kgTopPanel, kgViewport и kgFooterPanel, установленных на "0". Впоследствии, когда пользователь нажимает ссылку для активации ранее скрытой сетки, она не будет восстанавливать ширину, и они должны изменить размер окна браузера, чтобы увидеть вещи. После долгих часов я понял, что хак ниже, как способ обойти его, но он уродлив.

Есть ли элегантный способ исправить это без взлома? Могу ли я предотвратить, чтобы эти ширины были установлены на ноль в первую очередь? Я не эксперт по CSS, и я давно исчерпал свои знания. Я целый день искал в Интернете, пытаясь путать вещи и в итоге не нашел ответов.

В нижеприведенном фрагменте кода "domPanel" представляет собой div, содержащий ВСЕ решетки. "domObject" - это одна сетка, которую я хочу включить.

<div id='Grid1' data-bind="koGrid: g1.GridOptions"></div>
<div id='Grid2' data-bind="koGrid: g2.GridOptions"></div>
...
domTabPanel.children().css('display', 'none');
domObject.css('display', 'block');
// Hack to restore the widths.  If you resize the page
// when another tab is visible, all the widths will have been set to 0.
domObject.find(".kgTopPanel").css("width", "inherit");
domObject.find(".kgTopPanel").children().css("width", "inherit");
domObject.find(".kgViewport").css("width", "inherit");
domObject.find(".kgViewport").children().css("width", "inherit");
domObject.find(".kgFooterPanel").css("width", "inherit");
domObject.find(".kgFooterPanel").children().css("width", "inherit");

PS: Проблема возникает как в IE, так и в Chrome, поэтому я предполагаю, что все браузеры, вероятно, затронуты.

K Kimble 12 нояб. 2013, в 23:13

Источник

Теги:

jquery

css

knockout.js

kogrid

1 ответ

Ещё вопросы

Hans Roerdinkholder · Accepted Answer · 2013-11-13T10-23-00.000Z

Когда элемент получает display: none, получение его размера в JavaScript приведет к нулевой ширине и высоте. Вероятно, есть код (в koGrid), который читает ширину и высоту и делает что-то с ним программно. Тем не менее, соответствующий код отсутствует в вашем сообщении, поэтому вам сложно быть более конкретным.

Возможное исправление заключается в том, чтобы не использовать display: none, но "скрывать" невидимые сетки, предоставляя им абсолютную позицию и компенсируя их очень далеко от страницы. Сделайте это, предоставив им класс, который выглядит так:

.my-invisible-class {
    position: absolute;
    left: -9999px;
}

Таким образом, они скрыты от взгляда, но на самом деле все еще нетронутыми. Их ширина и высота должны оставаться стабильными.

Я попытаюсь. Это кажется мне немного странным, когда я так его отталкиваю, но я видел, как кто-то делал это однажды в системе меню, так что это должен быть довольно надежный способ сделать это. Спасибо, я дам вам знать, как это работает.
Это действительно решило проблему. Есть ли какие-нибудь ошибки, чтобы сделать это?
Я не совсем уверен, если честно. Одна вещь, о которой я могу подумать, это то, что элемент все еще считается находящимся в DOM и может инициировать перекомпоновку, поэтому в плане производительности он, вероятно, не так хорош, как display: none . Альтернатива - установить видимость свойства css следующим образом: visibility: hidden или visibility: visible . Это сохраняет элемент в домике, размеры не повреждены, просто невидимы. Я не думаю, что это будет соответствовать вашему варианту использования, потому что элемент все еще будет занимать место. Может быть, сочетание visibility: hidden и position: absolute ?