- jQuery UI Cookbook
- Adam Boduch
- 214字
- 2021-08-13 16:40:49
Controlling spacing with themes
The space between accordion sections is controlled by the CSS theme framework. In particular, the visual structure for the accordion is defined by a set of CSS rules that can be modified to control the spacing between accordion sections. We could override the accordion theme CSS to adjust for more or less spacing between sections.
How to do it...
We're going to supply an additional CSS module to our UI—one that overrides the accordion structure supplied in the theme we happen to be using. There's no need to fret, however, our change is a simple one. We're going to update the margin-top
property. In a new CSS file called theme.accordion.css
, let's add the following style rules:
.ui-accordion .ui-accordion-header { margin-top: 4px; }
Now that we have the CSS, we need to include it in our HTML header. It should look something like this:

How it works...
We're copying the same CSS selector as is found in any jQuery UI theme. The particular property we've just changed alters the space between the accordion sections. Since we're overriding the default theme value, it's important to include our CSS files after the default theme file. This allows us to override the default theme instead of the default theme overriding our modifications.
- Ansible權(quán)威指南
- 循序漸進(jìn)學(xué)Docker
- Linux操作系統(tǒng)應(yīng)用編程
- Learning Magento 2 Administration
- Delphi Programming Projects
- ElasticSearch Cookbook
- NetDevOps入門與實踐
- iOS 10 開發(fā)指南
- 程序員必讀經(jīng)典(算法基礎(chǔ)+計算機(jī)系統(tǒng))
- Getting Started with Raspberry Pi Zero
- UNIX傳奇:歷史與回憶
- 計算機(jī)系統(tǒng)平臺
- Raspberry Pi Networking Cookbook
- 不可不知的Windows技巧
- Embedded Systems Architecture