Skip to content

Commit 6aa3def

Browse files
damyanpetevdamyanpetev
committed
Cleanup editors knockout sample styles
1 parent 831217e commit 6aa3def

1 file changed

Lines changed: 34 additions & 44 deletions

File tree

‎HTMLSamples/editors/bind-editors-with-ko.html‎

Lines changed: 34 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -37,109 +37,99 @@
3737
</script>
3838

3939
<style type="text/css">
40-
body { font-family: Arial; }
41-
label { display: inline-block; }
42-
4340
.order-container {
44-
position: relative;
4541
width: 450px;
46-
margin-left: -225px;
47-
left: 50%;
48-
font-size:1.2em;
42+
margin: 0 auto;
4943
}
5044
.row {
5145
margin-top: 5px;
5246
}
47+
.heading-row
48+
{
49+
font-size: large;
50+
}
51+
5352
.row-control {
54-
height: 28px;
55-
padding: 0;
5653
vertical-align: top;
5754
-moz-box-sizing: border-box;
5855
-webkit-box-sizing: border-box;
5956
box-sizing: border-box;
6057
}
61-
.heading-row
58+
.row label
6259
{
63-
margin: 20px 0px 10px 0px;
64-
font-size: large;
60+
display: inline-block;
61+
font-family: Arial, Helvetica, sans-serif;
6562
}
66-
67-
.heading-label, .row-label, .row-control
63+
.row label, .row-control
6864
{
65+
height: 28px;
6966
width: 200px;
7067
margin: 0px 5px 0px 5px;
7168
}
7269

73-
74-
7570
@media all and (max-width: 520px) {
76-
.ui-datepicker {
77-
width: 250px;
78-
}
79-
8071
.order-container {
8172
width: 280px;
82-
margin-left: -140px;
8373
}
8474

85-
.ui-igedit {
75+
.ui-igedit-container {
8676
margin-bottom: 5px;
8777
}
8878
}
8979
</style>
9080

9181
<div class="order-container">
9282
<div class="row heading-row">
93-
<label class="heading-label">$$(KO_IG_Editors)</label>
94-
<label class="heading-label">$$(KO_Plain_Editors)</label>
83+
<label>$$(KO_IG_Editors)</label>
84+
<label>$$(KO_Plain_Editors)</label>
9585
</div>
96-
<div class="editor-row">
86+
<div>
9787
<div class="row">
98-
<label class="row-label">$$(KO_Order_Date):</label>
88+
<label>$$(KO_Order_Date):</label>
9989
</div>
10090
<div class="row">
10191
<!-- date editor -->
10292
<div id="orderDateIG" class="row-control" data-bind="igDateEditor: { value: orderDate, textAlign: 'right' }"></div>
103-
<input id="orderDate" type="text" class="row-control" data-bind="value: orderDate"></input>
93+
<input id="orderDate" class="row-control" data-bind="value: orderDate" type="text"></input>
10494
</div>
10595
</div>
10696

107-
<div class="editor-row">
97+
<div>
10898
<div class="row">
109-
<label class="row-label">$$(KO_Ship_Date)</label>
99+
<label>$$(KO_Ship_Date)</label>
110100
</div>
111101
<div class="row">
112102
<!-- date picker -->
113-
<div id="shipDateIG" class="gosho row-control" data-bind="igDatePicker: { value: shipDate, textAlign: 'right' }"></div>
114-
<input id="shipDate" class="date-row-control row-control" data-bind="value: shipDate"></input>
103+
<div id="shipDateIG" class="row-control" data-bind="igDatePicker: { value: shipDate, textAlign: 'right' }"></div>
104+
<input id="shipDate" class="row-control" data-bind="value: shipDate" type="text"></input>
115105
</div>
116106
</div>
117107

118-
<div class="editor-row">
108+
<div>
119109
<div class="row">
120-
<label class="row-label">$$(KO_Due_in_Days):</label>
110+
<label>$$(KO_Due_in_Days):</label>
121111
</div>
122112
<div class="row">
123113
<!-- numeric editor -->
124114
<div id="dueInDaysIG" class="row-control" data-bind="igNumericEditor: { value: dueInDays, textAlign: 'right' }"></div>
125-
<input id="dueInDays" type="number" class="row-control" data-bind="value: dueInDays"></input>
115+
<input id="dueInDays" class="row-control" data-bind="value: dueInDays" type="number"></input>
126116
</div>
127117
</div>
128118

129-
<div class="editor-row">
119+
<div>
130120
<div class="row">
131-
<label class="row-label">$$(KO_Customer_Name):</label>
121+
<label>$$(KO_Customer_Name):</label>
132122
</div>
133123
<div class="row">
134124
<!-- text editor -->
135125
<div id="customerNameIG" class="row-control" data-bind="igTextEditor: { value: customerName, textAlign: 'right' }"></div>
136-
<input id="customerNAme" type="text" class="row-control" data-bind="value: customerName"></input>
126+
<input id="customerNAme" class="row-control" data-bind="value: customerName" type="text"></input>
137127
</div>
138128
</div>
139129

140-
<div class="editor-row">
130+
<div>
141131
<div class="row">
142-
<label class="row-label">$$(KO_Contact_Phone): <br> $$(KO_Contact_Phone_Mask)</label>
132+
<label>$$(KO_Contact_Phone): <br> $$(KO_Contact_Phone_Mask)</label>
143133
</div>
144134
<div class="row">
145135
<!-- mask editor -->
@@ -152,20 +142,20 @@
152142
</div>
153143
</div>
154144

155-
<div class="editor-row">
145+
<div>
156146
<div class="row">
157-
<label class="row-label">$$(KO_Advance_Payment):</label>
147+
<label>$$(KO_Advance_Payment):</label>
158148
</div>
159149
<div class="row">
160150
<!-- currency editor -->
161151
<div id="advancePaymentIG" class="row-control" data-bind="igCurrencyEditor: { value: advancePayment, textAlign: 'right' }"></div>
162-
<input id="advancePayment" type="text" class="row-control" data-bind="value: advancePayment"></input>
152+
<input id="advancePayment" class="row-control" data-bind="value: advancePayment" type="text"></input>
163153
</div>
164154
</div>
165155

166-
<div class="editor-row">
156+
<div>
167157
<div class="row">
168-
<label class="row-label">$$(KO_Discount_Percent):</label>
158+
<label>$$(KO_Discount_Percent):</label>
169159
</div>
170160
<div class="row">
171161
<!-- percent editor -->

0 commit comments

Comments
 (0)