Repository navigation
Expand file tree
/
Copy pathpositions.html
More file actions
121 lines (115 loc) · 5.06 KB
/
Copy pathpositions.html
File metadata and controls
121 lines (115 loc) · 5.06 KB
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
<div class="col-lg-12 control-section toast-pos-section">
<div class="e-sample-resize-container" id="toast_pos_target">
<div id="toast_pos"> </div>
<div id="toast_pos_property">
<table style="width: 100%">
<tbody><tr>
<td>
<div style="padding:25px 0 0 0;">
<input id="dropdownRadio" type="radio">
</div>
</td>
<td>
<div style="padding:25px 0 0 0;">
<input id="customRedio" type="radio">
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colspan="2">
<div id="dropdown" style="padding-top:25px;">
<select id="position">
<option value="topleft">Top Left</option>
<option value="topright">Top Right</option>
<option value="topcenter">Top Center</option>
<option value="topfullwidth">Top Full Width</option>
<option value="bottomleft">Bottom Left</option>
<option value="bottomright">Bottom Right</option>
<option value="bottomcenter">Bottom Center</option>
<option value="bottomfullwidth">Bottom Full Width</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="customChoose" style="display: none">
<form id="formId" class="form-horizontal">
<div class="e-row">
<div class="e-float-input">
<input class="e-input" id="xPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="Digits">X Position</label>
</div>
</div>
<div class="e-row">
<div class="e-float-input">
<input class="e-input" id="yPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="Digits">Y Position</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
<div style="padding:25px 0 0 0;">
<input id="radio1" type="radio">
</div>
</td>
<td>
<div style="padding:25px 0 0 0;">
<input id="radio2" type="radio">
</div>
</td>
</tr>
</tbody></table>
<div id="toast_btn" style="padding-top: 25px">
<button class="e-btn e-control" id="show_Toast" style="margin-right: 15px"> Show Toasts </button>
<button class="e-btn e-control" id="hideTosat"> Hide All </button>
</div>
</div>
</div>
</div>
<div id="action-description">
<p>
This sample demonstrates the different positioning of the <code>Toast</code> based on the target given.
</p>
</div>
<div id="description">
<p>
Based on the use case toast can take the body element or any specific element as target. In this sample, with help of custom inputs toast can be positioned in the target.
</p>
<p>Toast can be positioned in the 8 pre-defined places.</p>
<p>Custom option will enable to give X and Y values to align the toast based on the given inputs.</p>
<p>More information about Toast can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/toast/es5-getting-started/">documentation</a> section.</p>
</div>
<style>
#toast_pos_property td {
width: 50%;
}
.e-toast-icon.e-laura.e-icons {
border-radius: 50%;
background-image: url('./src/toast/resource/laura.png');
background-repeat: no-repeat;
background-size: cover;
height: 50px !important;
width: 100px !important;
background-size: 50px 50px;
margin: 0;
}
@media (min-width: 740px) {
#toast_pos_property {
width: 450px;
}
}
</style>
<!-- custom code start -->
<style>
.toast-pos-section #toast_pos_property {
height: 500px;
border: none;
margin: auto;
}
</style>
<!-- custom code end -->