Search code examples
htmlcssprint-preview

css issue in print preview. textbox values showing double

So i have a couple of text boxes. which are resized via css. It looks perfect in internet explorer, chrome, etc. However. Once I click on Print Preview, the preview window shows the text twice.

How do I control this :

enter image description here

HTML Used :

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt1" name="txt1" class="iBanInit ibantxt" />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt2" name="txt2" class="ibantxt"/>
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt3" name="txt3"  class="ibantxt" />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt4" name="txt4"  class="ibantxt" />

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt5" name="txt5" class="iBanInit ibantxt" />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt6" name="txt6" class="ibantxt"  />
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt7" name="txt7"  class="ibantxt"  />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt8" name="txt8"  class="ibantxt" />

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt9" name="txt9"  class="iBanInit ibantxt"/>
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt10" name="txt10" class="ibantxt"  />
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt11" name="txt11"  class="ibantxt"  />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt12" name="txt12"  class="ibantxt" />

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt13" name="txt13" class="iBanInit ibantxt" />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt14" name="txt14"  class="ibantxt" />
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt15" name="txt15"  class="ibantxt"  />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt16" name="txt16"  class="ibantxt"  />

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt17" name="txt17" class="iBanInit ibantxt" />
<input type="text"  style="height: 35px;width:20px;;text-align:center" id="txt18" name="txt18"  class="ibantxt" />
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt19" name="txt19"  class="ibantxt"  />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt20" name="txt20" class="ibantxt"  />

<input type="text"  style="height: 35px;width:20px;margin-left:10px;text-align:center" id="txt21" name="txt21" class="iBanInit ibantxt" />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt22" name="txt22"  class="ibantxt" />
<input type="text"  style="height: 35px;width:19px;text-align:center" id="txt23" name="txt23"  class="ibantxt"  />
<input type="text"  style="height: 35px;width:20px;text-align:center" id="txt24" name="txt24"  class="ibantxt"  />

I know you should write this via style property but project inheritance comes into play. the classes used are blank.

Solution

  • some one might benefit from it. There was some legacy code which was setting the text property as well as val property of the textbox, hence the issue.