Skip to content

Commit 9919e6d

Browse files
Ashwini-SF5049Ashwini-SF5049
committed
998122: Implemented suggested changes
1 parent 727433f commit 9919e6d

File tree

8 files changed

+476
-18
lines changed

8 files changed

+476
-18
lines changed

‎ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor‎

Lines changed: 56 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,62 @@
11
@using Syncfusion.EJ2.Inputs
2+
@using Syncfusion.EJ2.DropDowns
23
@using EJ2MVCSampleBrowser.Models
34
@using Syncfusion.EJ2
4-
55
@section ControlsSection {
6-
<div class="col-lg-8 control-section">
7-
<div class="content-wrapper">
8-
<div class="mask-row">
9-
@Html.EJS().MaskedTextBox("maskTemplate")
10-
.Mask("0000-000-000")
11-
.PromptChar("#")
12-
.Placeholder("Enter phone number")
13-
.FloatLabelType(FloatLabelType.Auto)
14-
.PrependTemplate("<span id='user' class='e-icons e-user' title='User'></span><span class='e-input-separator'></span>")
15-
.AppendTemplate("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>")
16-
.Render()
17-
</div>
6+
<div class="control-section">
7+
<div class="col-lg-12 control-section">
8+
<div class="content-wrapper mask-row">
9+
@Html.EJS().MaskedTextBox("maskTemplate").Mask("0000-000-000").PromptChar("#").Placeholder("Enter phone number").FloatLabelType(FloatLabelType.Auto).PrependTemplate("<span id=\'user\' class=\'e-icons e-user\' title=\'User\'></span><span class=\'e-input-separator\'></span>").AppendTemplate("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>").Render()
1810
</div>
1911
</div>
20-
}
12+
}
13+
14+
@*custom code start*@
15+
<style>
16+
.content-wrapper {
17+
width: 30%;
18+
margin: 0 auto;
19+
min-width: 250px;
20+
}
21+
.control-label {
22+
padding: 24px 0px 10px 0px;
23+
font-size: 12px;
24+
}
25+
.mask-row label.e-float-text,
26+
.mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
27+
.mask-row .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
28+
margin-top: -2px;
29+
}
30+
.bootstrap5\.3 .mask-row .e-prepend-template,
31+
.bootstrap5\.3-dark .mask-row .e-prepend-template,
32+
.tailwind3 .mask-row .e-prepend-template,
33+
.tailwind3-dark .mask-row .e-prepend-template,
34+
.e-bigger.material3 .mask-row .e-prepend-template,
35+
.e-bigger.material3-dark .mask-row .e-prepend-template {
36+
padding-right: 0 !important;
37+
}
38+
.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
39+
.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
40+
.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
41+
top: -9px !important;
42+
}
43+
.e-bigger.material3 .mask-row .e-maskedtextbox,
44+
.e-bigger.material3-dark .mask-row .e-maskedtextbox {
45+
padding-left: 10px !important;
46+
}
47+
.e-bigger.material3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
48+
.e-bigger.material3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
49+
top: -3px !important;
50+
padding-left: 10px !important;
51+
}
52+
.e-bigger.bootstrap5\.3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
53+
.e-bigger.bootstrap5\.3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
54+
top: 20px !important;
55+
}
56+
.e-bigger.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
57+
.e-bigger.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
58+
.e-bigger.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
59+
margin-top: 0 !important;
60+
}
61+
</style>
62+
@*custom code end*@

‎ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,56 @@
1313
</div>
1414
</div>
1515
</div>
16-
}
16+
}
17+
@*custom code start*@
18+
<style>
19+
.content-wrapper {
20+
width: 30%;
21+
margin: 0 auto;
22+
min-width: 250px;
23+
}
24+
.control-label {
25+
padding: 10px 0px 5px 0px;
26+
font-size: 12px;
27+
}
28+
.material .e-prepend-mask .e-append-template .e-icons.e-send:before,
29+
.material-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
30+
.fabric .e-prepend-mask .e-append-template .e-icons.e-send:before,
31+
.fabric-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
32+
.bootstrap .e-prepend-mask .e-append-template .e-icons.e-send:before,
33+
.bootstrap-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
34+
.bootstrap4 .e-prepend-mask .e-append-template .e-icons.e-send:before,
35+
.highcontrast .e-prepend-mask .e-append-template .e-icons.e-send:before {
36+
content: '\e816' !important;
37+
}
38+
.mask-row label.e-float-text,
39+
.mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
40+
.mask-row .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
41+
margin-top: -2px;
42+
}
43+
.bootstrap5\.3 .mask-row .e-prepend-template,
44+
.bootstrap5\.3-dark .mask-row .e-prepend-template,
45+
.tailwind3 .mask-row .e-prepend-template,
46+
.tailwind3-dark .mask-row .e-prepend-template {
47+
padding-right: 0 !important;
48+
}
49+
.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
50+
.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
51+
.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
52+
top: -8px !important;
53+
}
54+
.e-bigger.material3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
55+
.e-bigger.material3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
56+
top: -3px !important;
57+
}
58+
.e-bigger.bootstrap5\.3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
59+
.e-bigger.bootstrap5\.3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
60+
top: 20px !important;
61+
}
62+
.e-bigger.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
63+
.e-bigger.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
64+
.e-bigger.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
65+
margin-top: 0 !important;
66+
}
67+
</style>
68+
@*custom code end*@

‎ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,68 @@
6161
});
6262
}
6363
}
64-
</script>
64+
</script>
65+
66+
@*custom code start*@
67+
<style>
68+
.content-wrapper {
69+
width: 35%;
70+
margin: 0 auto;
71+
min-width: 250px;
72+
}
73+
.custom-margin {
74+
margin: 25px 0;
75+
}
76+
.e-icons.e-search {
77+
background-color: rgba(0, 0, 0, 0) !important;
78+
}
79+
.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
80+
background-color: rgba(0,0,0,0) !important;
81+
}
82+
.bootstrap5\.3 .e-icontemplate .e-prepend-template,
83+
.bootstrap5\.3 .e-prependtemplate .e-prepend-template,
84+
.bootstrap5\.3-dark .e-icontemplate .e-prepend-template,
85+
.bootstrap5\.3-dark .e-prependtemplate .e-prepend-template,
86+
.tailwind3 .e-icontemplate .e-prepend-template,
87+
.tailwind3 .e-prependtemplate .e-prepend-template,
88+
.tailwind3-dark .e-icontemplate .e-prepend-template,
89+
.tailwind3-dark .e-prependtemplate .e-prepend-template {
90+
padding-right: 0 !important;
91+
}
92+
.fluent2 .e-icontemplate .e-prepend-template,
93+
.fluent2-dark .e-icontemplate .e-prepend-template,
94+
.fluent2-highcontrast .e-icontemplate .e-prepend-template,
95+
.fluent2 .e-prependtemplate .e-prepend-template,
96+
.fluent2-dark .e-prependtemplate .e-prepend-template,
97+
.fluent2-highcontrast .e-prependtemplate .e-prepend-template {
98+
padding-left: 8px !important;
99+
}
100+
.fluent2 .e-appendtemplate .e-numerictextbox,
101+
.fluent2-dark .e-appendtemplate .e-numerictextbox,
102+
.fluent2-highcontrast .e-appendtemplate .e-numerictextbox {
103+
padding-left: 8px !important;
104+
}
105+
.material3 .e-icontemplate .e-prepend-template,
106+
.material3-dark .e-icontemplate .e-prepend-template,
107+
.material3 .e-prependtemplate .e-prepend-template,
108+
.material3-dark .e-prependtemplate .e-prepend-template {
109+
padding-left: 0 !important;
110+
}
111+
.e-bigger.bootstrap5\.3 .row.custom-margin .e-append-template,
112+
.e-bigger.bootstrap5\.3-dark .row.custom-margin .e-append-template {
113+
padding: 7px !important;
114+
}
115+
.e-bigger.fluent2 .row.custom-margin .e-append-template,
116+
.e-bigger.fluent2-dark .row.custom-margin .e-append-template,
117+
.e-bigger.fluent2-highcontrast .row.custom-margin .e-append-template,
118+
.e-bigger.tailwind3 .row.custom-margin .e-append-template,
119+
.e-bigger.tailwind3-dark .row.custom-margin .e-append-template {
120+
padding: 8px !important;
121+
}
122+
.e-icontemplate .e-icons.e-reset,
123+
.e-icontemplate .e-icons.e-horizontal-line,
124+
.e-icontemplate .e-icons.e-plus {
125+
cursor: pointer;
126+
}
127+
</style>
128+
@*custom code end*@

‎ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,69 @@
2525
</div>
2626
}
2727

28+
@*custom code start*@
29+
<style>
30+
.content-wrapper {
31+
width: 35%;
32+
margin: 0 auto;
33+
min-width: 250px;
34+
}
35+
.custom-margin {
36+
margin: 25px 0;
37+
}
38+
.e-icons.e-search {
39+
background-color: rgba(0, 0, 0, 0) !important;
40+
}
41+
.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
42+
background-color: rgba(0,0,0,0) !important;
43+
}
44+
.bootstrap5\.3 .e-icontemplate .e-prepend-template,
45+
.bootstrap5\.3 .e-prependtemplate .e-prepend-template,
46+
.bootstrap5\.3-dark .e-icontemplate .e-prepend-template,
47+
.bootstrap5\.3-dark .e-prependtemplate .e-prepend-template,
48+
.tailwind3 .e-icontemplate .e-prepend-template,
49+
.tailwind3 .e-prependtemplate .e-prepend-template,
50+
.tailwind3-dark .e-icontemplate .e-prepend-template,
51+
.tailwind3-dark .e-prependtemplate .e-prepend-template {
52+
padding-right: 0 !important;
53+
}
54+
.fluent2 .e-icontemplate .e-prepend-template,
55+
.fluent2-dark .e-icontemplate .e-prepend-template,
56+
.fluent2-highcontrast .e-icontemplate .e-prepend-template,
57+
.fluent2 .e-prependtemplate .e-prepend-template,
58+
.fluent2-dark .e-prependtemplate .e-prepend-template,
59+
.fluent2-highcontrast .e-prependtemplate .e-prepend-template {
60+
padding-left: 8px !important;
61+
}
62+
.fluent2 .e-appendtemplate .e-numerictextbox,
63+
.fluent2-dark .e-appendtemplate .e-numerictextbox,
64+
.fluent2-highcontrast .e-appendtemplate .e-numerictextbox {
65+
padding-left: 8px !important;
66+
}
67+
.material3 .e-icontemplate .e-prepend-template,
68+
.material3-dark .e-icontemplate .e-prepend-template,
69+
.material3 .e-prependtemplate .e-prepend-template,
70+
.material3-dark .e-prependtemplate .e-prepend-template {
71+
padding-left: 0 !important;
72+
}
73+
.e-bigger.bootstrap5\.3 .row.custom-margin .e-append-template,
74+
.e-bigger.bootstrap5\.3-dark .row.custom-margin .e-append-template {
75+
padding: 7px !important;
76+
}
77+
.e-bigger.fluent2 .row.custom-margin .e-append-template,
78+
.e-bigger.fluent2-dark .row.custom-margin .e-append-template,
79+
.e-bigger.fluent2-highcontrast .row.custom-margin .e-append-template,
80+
.e-bigger.tailwind3 .row.custom-margin .e-append-template,
81+
.e-bigger.tailwind3-dark .row.custom-margin .e-append-template {
82+
padding: 8px !important;
83+
}
84+
.e-icontemplate .e-icons.e-reset,
85+
.e-icontemplate .e-icons.e-horizontal-line,
86+
.e-icontemplate .e-icons.e-plus {
87+
cursor: pointer;
88+
}
89+
</style>
90+
@*custom code end*@
2891

2992
@section PreScripts {
3093
<script>

‎ej2-asp-core-mvc/code-snippet/textarea/adornments/razor‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,71 @@
5555
textArea.dataBind();
5656
}
5757
</script>
58+
59+
@*custom code start*@
60+
<style>
61+
.content-wrapper div.multiline-row {
62+
margin: 0 auto;
63+
padding: 40px 0px 0px;
64+
}
65+
.multiline-property .left-side {
66+
font-size: 14px;
67+
padding: 8px;
68+
}
69+
.multiline-property.property-panel-table div.multiline {
70+
padding-left: 0px;
71+
}
72+
.property-panel-content td {
73+
padding: 10px 0px;
74+
width: 50%;
75+
}
76+
.e-bigger .ador-textarea .e-prepend-template {
77+
padding-right: 0 !important;
78+
}
79+
.e-bigger.material3 .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
80+
.e-bigger.material3-dark .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
81+
top: -11px !important;
82+
}
83+
.e-bigger.material3 .ador-textarea .e-input-separator,
84+
.e-bigger.material3-dark .ador-textarea .e-input-separator {
85+
margin-top: 3px !important;
86+
}
87+
.e-bigger.material3 .ador-textarea .e-textarea,
88+
.e-bigger.material3-dark .ador-textarea .e-textarea {
89+
margin-top: 10px !important;
90+
}
91+
.e-bigger.fluent2 .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
92+
.e-bigger.fluent2-dark .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
93+
.e-bigger.fluent2-highcontrast .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
94+
top: -8px !important;
95+
}
96+
.e-bigger.fluent2 .ador-textarea .e-input-separator,
97+
.e-bigger.fluent2-dark .ador-textarea .e-input-separator,
98+
.e-bigger.fluent2-highcontrast .ador-textarea .e-input-separator {
99+
margin-top: 2px !important;
100+
}
101+
.e-bigger.tailwind3 .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
102+
.e-bigger.tailwind3-dark .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
103+
top: -7px !important;
104+
}
105+
.e-bigger.bootstrap5\.3 .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
106+
.e-bigger.bootstrap5\.3-dark .ador-textarea .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
107+
top: 19px !important;
108+
}
109+
.e-bigger.bootstrap5\.3 .ador-textarea .e-textarea,
110+
.e-bigger.bootstrap5\.3-dark .ador-textarea .e-textarea,
111+
.e-bigger.fluent2 .ador-textarea .e-textarea,
112+
.e-bigger.fluent2-dark .ador-textarea .e-textarea,
113+
.e-bigger.fluent2-highcontrast .ador-textarea .e-textarea {
114+
margin-top: 3px !important;
115+
}
116+
.tailwind3 .ador-textarea .e-textarea,
117+
.tailwind3-dark .ador-textarea .e-textarea {
118+
margin-top: 6px !important;
119+
}
120+
.e-bigger.tailwind3 div.e-input-group.e-prepend-wrapper.e-multi-line-input.e-outline.e-float-input.e-control-wrapper Label.e-label-top,
121+
.e-bigger.tailwind3-dark div.e-input-group.e-prepend-wrapper.e-multi-line-input.e-outline.e-float-input.e-control-wrapper Label.e-label-top {
122+
top: -26px !important;
123+
}
124+
</style>
125+
@*custom code end*@

0 commit comments

Comments
 (0)