Как сделать угол ui-grid закругленным?

Question

Listview имеет свойство вставки данных, чтобы сделать его углы скругленными.Однако я не могу использовать просмотр списка, потому что мой список является вложенным списком, и поведение фреймворка по умолчанию скрывает вложенный список и показывает его, как только щелкнет его основной список.Итак, я решил использовать представление ui-grid внутри основной строки списка, которая выглядит следующим образом:

<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>

Моя проблема в том, что углы ui-grid должны быть закруглены.Я попытался поставить data-inset = "true", но не сработало.

Answer 1

Вы можете использовать классы, которые jQuery Mobile добавляет в виджеты, в этом случае вы ищете класс ui-corner-all, который помещает углы во все четыре угла, и тогда вам, вероятно, понадобится box-shadow, который ui-shadow применяется:

<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">

Я добавил отступ, потому что у элемента сетки по умолчанию не было ни одного элемента. Также есть классы ui-corner-top и ui-corner-bottom, которые округляют только верх / низ элемента, к которому они применяются.

Вот демоверсия: http://jsfiddle.net/VXrxv/

Если вместо этого вы хотите округлить элемент li, который является родителем элемента ui-grid, вы можете добавить к ним margin:

<li class="ui-corner-all ui-shadow" style="margin: 5px;">

Вот демоверсия: http://jsfiddle.net/VXrxv/1/

Answer 2

На Bootstrap происходит округление;

Это, кажется, самое быстрое решение для меня;

Оберните виджеты тумана следующим div

<div class="k-block" style="padding:0px">

Answer 3

Попробуйте со свойством CSS border-radius.Например, попробуйте border-radius: 0.5em 0.5em;