-
Notifications
You must be signed in to change notification settings - Fork 2
/
nested.html
143 lines (143 loc) · 4.07 KB
/
nested.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<title>splitter</title>
<style type="text/css">
div[splitter]{
height:400px;
left:0px;
top: 2px;
width: 800px;
border: 2px solid black;
}
.hpane{
min-width: 10px;
}
.hpane1{
width:100px;
height: 100%;
border: 2px solid green;
}
.hpane2{
top: 0px;
left:100px;
height: 50%;
width:100px;
border: 2px solid red;
overflow:hidden;
}
.hpane3{
left:200px;
min-width: 70px;
width:100px;
border: 2px solid purple;
}
.hpane4{
left:300px;
min-width: 70px;
width:100px;
border: 2px solid purple;
}
.hpane5{
left:400px;
min-width: 30px;
max-width: 60px;
width:40px;
border: 2px solid purple;
}
.hpane6{
left:500px;
width:40px;
border: 2px solid darkslategray;
}
.horizontal.split-handler{
padding: 0 0 0 0;
width: 4px;
height: 100%;
cursor: ew-resize;
background-color: black;
z-index:999;
}
div#vertical[splitter]{
width:200px;
top:0px;
padding: 0 0 0 0;
margin: 0 0 0 0;
height: 400px;
width: 200px;
border: 2px solid black;
}
.vpane{
min-height: 10px;
}
.vpane1{
height:100px;
width: 100%;
border: 2px solid green;
}
.vpane2{
top:100px;
width: 50%;
height:100px;
border: 2px solid red;
overflow:hidden;
}
.vpane3{
top:200px;
min-height: 70px;
height:100px;
border: 2px solid purple;
}
.vpane4{
top:300px;
min-height: 70px;
height:100px;
border: 2px solid purple;
}
.vpane5{
top:400px;
min-height: 30px;
max-height: 60px;
height:40px;
border: 2px solid purple;
}
.vpane6{
top:500px;
height:40px;
border: 2px solid darkslategray;
}
.vertical.split-handler{
padding: 0 0 0 0;
height: 4px;
width: 100%;
cursor: ns-resize;
background-color: black;
z-index:999;
}
</style>
</head>
<body>
<div splitter>
<div class="hpane hpane1">1 Lorem ipsum dolor </div>
<div class="hpane hpane2">2 est iusto mollitia nisi odio quas rerum totam?</div>
<div class="hpane hpane3">3 iusto mollitia nisi odio quas rerum totam?</div>
<div class="hpane hpane4">4sfdggf</div>
<div class="hpane hpane5">5 fsdgdsgg?</div>
<div class="hpane hpane6">
<div splitter id ="vertical" vertical="true">
<div class="vpane vpane1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aut deserunt eos modi, molestiae recusandae velit veritatis voluptatibus voluptatum!</div>
<div class="vpane vpane2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, ipsum magni maxime non perspiciatis possimus reiciendis reprehenderit sit? Obcaecati, vero?</div>
<div class="vpane vpane3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, ipsum magni maxime non perspiciatis possimus reiciendis reprehenderit sit? Obcaecati, vero?</div>
<div class="vpane vpane4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, ipsum magni maxime non perspiciatis possimus reiciendis reprehenderit sit? Obcaecati, vero?</div>
</div>
</div>
</div>
</div>
<script src="angular.js"></script>
<script src="splitter.js"></script>
<script>
angular.module('myApp', ['splitter']);
</script>
</body>
</html>