diff --git a/packages/clay-drop-down/docs/markup-dropdown.md b/packages/clay-drop-down/docs/markup-dropdown.md index 51420e05ee..4484f2c959 100644 --- a/packages/clay-drop-down/docs/markup-dropdown.md +++ b/packages/clay-drop-down/docs/markup-dropdown.md @@ -41,6 +41,10 @@ mainTabURL: 'docs/components/drop-down.html' +
+ This page uses Bootstrap's dropdown plugin which requires JQuery. Liferay 7.4 no longer includes JQuery by default. We have included a standalone dropdown plugin in 7.4, just replace the attribute data-toggle="dropdown" with data-toggle="liferay-dropdown" on the dropdown-toggle. +
+ ## Variations(#css-variations) ### Default(#css-default) @@ -48,15 +52,15 @@ mainTabURL: 'docs/components/drop-down.html' The default dropdown is a panel that does not support scrolling of the content inside it. Use this type when the number of options you want to offer is short or the panel is big enough to contain all the elements you want to use.
-
-
- -
-
+
+
+ +
+
```html @@ -78,55 +82,55 @@ The default dropdown is a panel that does not support scrolling of the content i Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default width is 500px.
-
-
-
-
-
- - -
-
- - -
-
- -
-
-
-
-
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+
```html @@ -245,55 +249,55 @@ Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default Use `.dropdown-full` to create a dropdown menu as wide as its relative parent.
-
-
- -
-
+
+
+ +
+
```html @@ -518,17 +522,17 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m ### Dividers(#css-dividers)
-
- -
+
+ +
```html @@ -552,90 +556,90 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Checkbox or Radio(#css-checkbox-or-radio)
-
-
-
    -
  • Filter by
    • -
  • -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    -
    • -
-
-
-
    -
  • Order by
    • -
  • -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    -
    • -
-
-
+
+
+
    +
  • Filter by
    • +
  • +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    • +
+
+
+
    +
  • Order by
    • +
  • +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    • +
+
+
```html @@ -759,37 +763,37 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Search(#css-search)
-
- -
+
+ +
```html @@ -843,40 +847,40 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Form Groups(#css-form-groups)
-
- -
+
+ +
```html @@ -936,46 +940,46 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Start(#css-start)
-
- -
+
+ +
```html @@ -1037,46 +1041,46 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### End(#css-end)
-
- -
+
+ +
```html @@ -1138,51 +1142,51 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Start and End(#css-start-and-end)
-
- -
+
+ +
```html @@ -1620,34 +1624,34 @@ Make content expand to fill remaining space in a `dropdown-item` or create equal Nest `
` inside a `.dropdown-menu` list item to create a scrollable dropdown. The maximum height is 200px on screen sizes 768px and above, on screen sizes 767px and below the overflow is handled by `.dropdown-menu`.
-
- -
+
+ +
```html @@ -1688,23 +1692,21 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d ### Anchors(#css-anchors)
-
-
- - -
-
+
+ + +
```html @@ -1713,6 +1715,7 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" + data-toggle="dropdown" href="#1" id="dropdownAction1" role="button" @@ -1739,23 +1742,21 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d ### Buttons(#css-buttons)
-
-
- - -
-
+
+ + +
```html @@ -1764,6 +1765,7 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" + data-toggle="dropdown" id="dropdownBtnAction1" type="button" > @@ -1793,58 +1795,58 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `dropdown-menu-right`, `dropdown-menu-top`, or `dropdown-menu-top-right`.
-
- - -
-
- - -
-
- - -
-
- - -
+
+ + +
+
+ + +
+
+ + +
+
+ + +
```html @@ -1965,74 +1967,74 @@ Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `d Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-right-side-bottom`, or `dropdown-menu-left-side-bottom` class to a dropdown menu to align it with the right side, left side, bottom-right side, or bottom-left side of the dropdown menu trigger, respectively:
-
- - -
-
- - -
-
- - -
-
- - -
+
+ + +
+
+ + +
+
+ + +
+
+ + +
```html @@ -2167,36 +2169,36 @@ Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-ri You can also center the dropdown menu to its trigger with these four helper classes: `dropdown-menu-center`, `dropdown-menu-top-center`, `dropdown-menu-left-side-middle`, or `dropdown-menu-right-side-middle`.
-
- - -
-
- - -
+
+ + +
+
+ + +
```html @@ -2265,32 +2267,32 @@ You can also center the dropdown menu to its trigger with these four helper clas To center the dropdown menu in browsers that don't support CSS transforms, set a negative `margin-left` equal to the width of the `dropdown-menu` divided by two. To vertically align left-side and right-side dropdown-menus, set a negative `margin-top` equal to the height of the dropdown-menu divided by two.
-
- - -
-
- - -
+
+ + +
+
+ + +
```html