docs: Responsive fixes for examples pages (#19448)

* Remove fixed width from cascader examples

* Replace fixed vertical slider example height with clearfix div

* Replace fixed width on TreeSelect examples with percentage width

* Update test snapshots

* Use inline-block rather than float left for vertical slider example

components/cascader/index.en-US.md

@@ -72,9 +72,3 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | remove focus |         |
 | focus() | get focus    |         |
-
-<style>
-.ant-cascader-picker {
-  width: 300px;
-}
-</style>

components/cascader/index.zh-CN.md

@@ -74,10 +74,4 @@ interface Option {
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-<style>
-.ant-cascader-picker {
-  width: 300px;
-}
-</style>
-
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -1032,11 +1032,9 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
 `;
 
 exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
-<div
-  style="height:300px"
->
+<div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-vertical"
@@ -1067,7 +1065,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-vertical"
@@ -1108,7 +1106,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-with-marks ant-slider-vertical"

components/slider/demo/vertical.md

@@ -17,7 +17,7 @@ The vertical Slider.
 import { Slider } from 'antd';
 
 const style = {
-  float: 'left',
+  display: 'inline-block',
   height: 300,
   marginLeft: 70,
 };
@@ -35,7 +35,7 @@ const marks = {
 };
 
 ReactDOM.render(
-  <div style={{ height: 300 }}>
+  <div>
     <div style={style}>
       <Slider vertical defaultValue={30} />
     </div>

components/tree-select/__tests__/__snapshots__/demo.test.js.snap

@@ -5,7 +5,7 @@ exports[`renders ./components/tree-select/demo/async.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -53,7 +53,7 @@ exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -101,7 +101,7 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="-1"
 >
   <span
@@ -184,7 +184,7 @@ exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="-1"
 >
   <span
@@ -231,7 +231,7 @@ exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -279,7 +279,7 @@ exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span

components/tree-select/demo/async.md

@@ -63,7 +63,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         treeDataSimpleMode
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"

components/tree-select/demo/basic.md

@@ -32,7 +32,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         showSearch
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"

components/tree-select/demo/checkable.md

@@ -74,7 +74,7 @@ class Demo extends React.Component {
       showCheckedStrategy: SHOW_PARENT,
       searchPlaceholder: 'Please select',
       style: {
-        width: 300,
+        width: '100%',
       },
     };
     return <TreeSelect {...tProps} />;

components/tree-select/demo/multiple.md

@@ -32,7 +32,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         showSearch
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"

components/tree-select/demo/suffix.md

@@ -35,7 +35,7 @@ class Demo extends React.Component {
       <TreeSelect
         showSearch
         suffixIcon={icon}
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"

components/tree-select/demo/treeData.md

@@ -54,7 +54,7 @@ class Demo extends React.Component {
   render() {
     return (
       <TreeSelect
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         treeData={treeData}