Как переопределить стили пользовательского интерфейса JQuery?

Question

Как переопределить стили пользовательского интерфейса JQuery?

0

Я использую JQuery UI sortable, который, кажется, заставляет сортируемые элементы иметь отображение: block.

Тем не менее, я бы хотел, чтобы эти элементы имели отображение: встроенный блок.

Я пробовал использовать этот css:.item {display: inline-block! Important; } }

Но это не работает (о чем свидетельствуют вычисленные стили в консоли Chrome).

Я также попытался использовать следующий оператор jquery: $ ('. Item'). Css ({display: 'inline-block'})

Но это тоже не работает.

Как я могу переопределить стили пользовательского интерфейса JQuery?

user1050268 19 дек. 2013, в 23:25

Источник

1

с помощью высокоспецифичного селектора CSS.
DrCord 19 дек. 2013, в 21:33
0

Вы определяете свой CSS до или после ссылки на jquery-ui.css ?
Jason Sperske 19 дек. 2013, в 21:35
0

Я даже не ссылаюсь на jquery-ui.css, я просто использую jquery-ui.js
user1050268 19 дек. 2013, в 21:41

Показать ещё 1 комментарий

Теги:

jquery

css

jquery-ui

jquery-ui-draggable

2 ответа

0

Вы уверены, что нацелились на правильный класс?

У меня это для моего jquery-ui sortable, и он работает отлично.

#tabs .word-list li {
margin: 3px;
background-color: #FCFCFC;
padding: 7px 16px;
border-radius: 30px;
border-bottom: 2px solid #C7C7C7;
border-right: 2px solid #B1B1B1;
display: inline-block;
}

Я также не загружаю файл jquery-ui-css, я считаю, что он раздувается. И я откатываю свой стиль в любом случае для этих элементов, может и не быть вашим делом.

Попробуйте более точно настроить таргетинг. Как и я. id-> класс.

Также вы можете попробовать включить jquery-ui-css файл перед своими собственными стилями.

user796443 19 дек. 2013, в 18:45

0

Я определенно нацеливаюсь на правильный класс, с высоким уровнем специфичности. Я также никогда не загружал файл jquery-ui-css, я только использую файл jquery-ui.js. Так что я не уверен, почему это не работает на моем конце ...
user1050268 19 дек. 2013, в 21:40
0

@ user1050268 сделай jsfiddle чем :)
user796443 19 дек. 2013, в 21:52
0

Хорошее предложение! Оказывается, моя проблема ниже уровня jquery ui, и на самом деле это проблема, с которой я столкнулся при работе с html / css в целом. Например, я пытаюсь разместить элементы в следующем jsfiddle с плавающей точкой, чтобы четвертый элемент находился на одном уровне с левой границей своего контейнера (вместо переноса непосредственно под третьим элементом) jsfiddle.net/emg6x Знаете ли вы, как это можно быть сделано, не прибегая к созданию div, которые являются просто контейнерами строк?
user1050268 19 дек. 2013, в 22:10
0

Примечание: я ищу описанное выше поведение float / clear в тех случаях, когда я не могу предсказать, сколько элементов будет в контейнере и каковы их размеры.
user1050268 19 дек. 2013, в 22:30
0

@ user1050268 Может быть, вы должны использовать упаковку вместо сортировки jquery ui. посмотрите: packery.metafizzy.co
user796443 20 дек. 2013, в 00:10

Показать ещё 3 комментария

Ещё вопросы

с помощью высокоспецифичного селектора CSS.
Вы определяете свой CSS до или после ссылки на jquery-ui.css ?
Я даже не ссылаюсь на jquery-ui.css, я просто использую jquery-ui.js
Я определенно нацеливаюсь на правильный класс, с высоким уровнем специфичности. Я также никогда не загружал файл jquery-ui-css, я только использую файл jquery-ui.js. Так что я не уверен, почему это не работает на моем конце ...
Хорошее предложение! Оказывается, моя проблема ниже уровня jquery ui, и на самом деле это проблема, с которой я столкнулся при работе с html / css в целом. Например, я пытаюсь разместить элементы в следующем jsfiddle с плавающей точкой, чтобы четвертый элемент находился на одном уровне с левой границей своего контейнера (вместо переноса непосредственно под третьим элементом) jsfiddle.net/emg6x Знаете ли вы, как это можно быть сделано, не прибегая к созданию div, которые являются просто контейнерами строк?
Примечание: я ищу описанное выше поведение float / clear в тех случаях, когда я не могу предсказать, сколько элементов будет в контейнере и каковы их размеры.
@ user1050268 Может быть, вы должны использовать упаковку вместо сортировки jquery ui. посмотрите: packery.metafizzy.co

user1050268 · Accepted Answer · 2013-12-20T12-24-00.000Z

Решением было установить float: none, что позволило отображать желаемый стиль отображения inline-блока. Затем мне нужно было установить вертикальное выравнивание: верх, чтобы элементы выравнивались на вершинах. Общее количество css:

.item {
    float:none;
    display:inline-block;
    vertical-align:top;
}