html - Unable to set width inside ASP repeater -
i having below repeater table tr , td have assigned width these doesn't work. have tried px , % both doesn't work in case.
<div style="padding: 3px;"> <asp:repeater id="rptincrementalint" runat="server" visible="true" onitemdatabound="rptincrementalint_itemdatabound"> <headertemplate> <table cellpadding="0" cellspacing="1" class="ey-datatable"> <tbody style="background-color: white"> <tr class="heading"> <td class="ey-formlabel1 alignedrow" style="width: 5% !important;" rowspan="2">company group</td> <td class="ey-formlabel1 alignedrow" style="width: 50px;" rowspan="2">entity</td> <td class="ey-formlabel1 alignedrow" style="width: 50px;" rowspan="2">category</td> <td class="ey-formlabel1 alignedrow" style="width: 40px;" rowspan="2">legislation</td> <td class="ey-formlabel1 alignedrow" style="width: 40px;" rowspan="2">nature of proceeding</td> <td class="ey-formlabel1 alignedrow" style="width: 30px" rowspan="2">interest type</td> <td class="ey-formlabel1 alignedrow" style="width: 40px;" rowspan="2">section</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">rate (%)</td> <td class="ey-formlabel1 alignedrow" style="width: 40px;" rowspan="2">mode of interest computation</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">start date type</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">start date dd-mmm-yy</td> <td class="ey-formlabel1 alignedrow" style="width: 40px;" rowspan="2">end date dd-mmm-yy</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">adjustment part of month</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">no. of days in month</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">no. of days in year</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">amount on int computed</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">net amount</td> <td class="ey-formlabel1 alignedrow" style="width: 90px;" colspan="3">break-up, if available</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">interest compounded on</td> <td class="ey-formlabel1 alignedrow" style="width: 60px;" colspan="2">period</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;" rowspan="2">interest</td> <td class="ey-formlabel1 alignedrow" style="width: 90px;" colspan="3">existing open issues</td> <td class="ey-formlabel1 alignedrow" style="width: 90px;" colspan="3">risk apportionment</td> </tr> <tr class="heading alignedrow"> <td class="ey-formlabel1 alignedrow" style="width: 30px">base exposure</td> <td class="ey-formlabel1 alignedrow" style="width: 30px">interest</td> <td class="ey-formlabel1 alignedrow" style="width: 30px">penalty</td> <td class="ey-formlabel1 alignedrow" style="width: 30px">month</td> <td class="ey-formlabel1 alignedrow" style="width: 30px">days</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">probable</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">possible</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">remote</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">probable</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">possible</td> <td class="ey-formlabel1 alignedrow" style="width: 30px;">remote</td> </tr> </headertemplate> <itemtemplate> <tr> <td class="ey-formlabel1" style="width: 50px;"><%# databinder.eval(container.dataitem, "cgroupname") %> <asp:hiddenfield id="hiddmainproceedingid" runat="server" value='<%#databinder.eval(container.dataitem,"mainproceedingid") %>' /> <asp:hiddenfield id="hiddrowindex" runat="server" value='<%#databinder.eval(container.dataitem,"rowid") %>' /> <asp:hiddenfield id="hiddinterestcalcid" runat="server" value='<%#databinder.eval(container.dataitem,"interestcalcid") %>' /> </td> <td class="ey-formlabel1" style="width: 50px;"><%# databinder.eval(container.dataitem, "entityname") %></td> <td class="ey-formlabel1" style="width: 50px;"><%# databinder.eval(container.dataitem, "category") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "legislation") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "nop") %></td> <td class="ey-formlabel1" style="width: 30px;"> <%# databinder.eval(container.dataitem, "interesttype") %> <asp:hiddenfield id="hiddinteresttypeid" runat="server" value='<%#databinder.eval(container.dataitem,"interesttypeid") %>' /> </td> <td class="ey-formlabel1" style="width: 40px;"> <%# databinder.eval(container.dataitem, "sectionref") %> <asp:hiddenfield id="hiddsecrefid" runat="server" value='<%#databinder.eval(container.dataitem,"sectionrefid") %>' /> </td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "intrate") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "intmodecomputation") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "startdatetype") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "startdate") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "enddate") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "adjpartofmonth") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "noofdaysmonths") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "noofdaysyr") %></td> <td class="ey-formlabel1" style="width: 40px;"><%# databinder.eval(container.dataitem, "amtintcomputatedon") %></td> <td class="ey-formlabel1" style="text-align: right; width: 30px;"><%# databinder.eval(container.dataitem, "netamt") %></td> <td class="ey-formlabel1" style="text-align: right; width: 30px;"><%# databinder.eval(container.dataitem, "dutyamt") %></td> <td class="ey-formlabel1" style="text-align: right; width: 30px;"><%# databinder.eval(container.dataitem, "interestamt") %></td> <td class="ey-formlabel1" style="text-align: right; width: 30px;"><%# databinder.eval(container.dataitem, "penaltyamt") %></td> <td class="ey-formlabel1" style="width: 30px;"> <asp:textbox id="txtinterestcomputedon" width="90px" cssclass="amount" onkeyup="javascript:numberwithcommas(this, this.value);" runat="server" text='<%# databinder.eval(container.dataitem, "intcomputatedon") %>'></asp:textbox> <asp:regularexpressionvalidator id="reamount" runat="server" controltovalidate="txtinterestcomputedon" errormessage='<%# string.format("please enter numbers in interest computed on in row no {0}", container.itemindex + 1) %>' cssclass="errors" validationexpression1="^\d+(\.\d{1,2})?$" validationexpression="^(?:\d|[,])+$" validationgroup="main">*</asp:regularexpressionvalidator> </td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "periodmonth") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "perioddays") %></td> <td class="ey-formlabel1" style="width: 30px;"> <asp:textbox id="txtinterest" runat="server" width="90px" cssclass="amount" onkeyup="javascript:numberwithcommas(this, this.value);" text='<%# databinder.eval(container.dataitem, "interest") %>'></asp:textbox> <asp:regularexpressionvalidator id="reinterest" runat="server" controltovalidate="txtinterest" errormessage='<%# string.format("please enter numbers in interest in row no {0}", container.itemindex + 1) %>' cssclass="errors" validationexpression="^(?:\d|[,])+$" validationgroup="main">*</asp:regularexpressionvalidator> </td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "probable") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "possible") %></td> <td class="ey-formlabel1" style="width: 30px;"><%# databinder.eval(container.dataitem, "remote") %></td> <td class="ey-formlabel1" style="width: 30px;"> <asp:textbox id="txtriskprobable" runat="server" width="90px" cssclass="amount" onkeyup="javascript:numberwithcommas(this, this.value);" text='<%# databinder.eval(container.dataitem, "probableapp") %>'></asp:textbox> <asp:regularexpressionvalidator id="reriskprobable" runat="server" controltovalidate="txtriskprobable" errormessage='<%# string.format("please enter numbers in risk probable in row no {0}", container.itemindex + 1) %>' cssclass="errors" validationexpression="^(?:\d|[,])+$" validationgroup="main">*</asp:regularexpressionvalidator> </td> <td class="ey-formlabel1" style="width: 30px;"> <asp:textbox id="txtriskpossible" runat="server" width="90px" cssclass="amount" onkeyup="javascript:numberwithcommas(this, this.value);" text='<%# databinder.eval(container.dataitem, "possibleapp") %>'></asp:textbox> <asp:regularexpressionvalidator id="reriskpossible" runat="server" controltovalidate="txtriskpossible" errormessage='<%# string.format("please enter numbers in risk possible in row no {0}", container.itemindex + 1) %>' cssclass="errors" validationexpression="^(?:\d|[,])+$" validationgroup="main">*</asp:regularexpressionvalidator> </td> <td class="ey-formlabel1" style="width: 30px;"> <asp:textbox id="txtriskremote" runat="server" width="90px" cssclass="amount" onkeyup="javascript:numberwithcommas(this, this.value);" text='<%# databinder.eval(container.dataitem, "remoteapp") %>'></asp:textbox> <asp:regularexpressionvalidator id="reriskremote" runat="server" controltovalidate="txtriskremote" errormessage='<%# string.format("please enter numbers in risk remote in row no {0}", container.itemindex + 1) %>' cssclass="errors" validationexpression="^(?:\d|[,])+$" validationgroup="main">*</asp:regularexpressionvalidator> </td> </tr> </itemtemplate> <footertemplate> <tr class="heading" style="text-align: justify; font-weight: bolder;"> <td colspan="21"> </td> <td colspan="2" style="text-align: center;">total </td> <td class="heading ey-formlabel1" style="text-align: right;"> <asp:label id="lbltotal" runat="server"></asp:label> </td> <td colspan="3"> </td> <td class="heading ey-formlabel1" style="text-align: right;"> <asp:label id="lblriskprobabletotal" runat="server"></asp:label> </td> <td class="heading ey-formlabel1" style="text-align: right;"> <asp:label id="lblriskpossibletotal" runat="server"></asp:label> </td> <td class="heading ey-formlabel1" style="text-align: right;"> <asp:label id="lblriskremotetotal" runat="server"></asp:label> </td> </tr> </tbody> </table> </footertemplate> </asp:repeater> <div style="padding: 3px;"> <table width="99%" cellpadding="0" cellspacing="1" class="ey-datatable"> <tbody style="background-color: white"> <tr class="heading"> <td class="ey-formlabel1 alignedrow" rowspan="2" style="width: 600px;">test nadeem </td> <td class="ey-formlabel1 alignedrow" colspan="2" style="width: 5px;">test nadeem </td> <td class="ey-formlabel1 alignedrow">pending </td> </tr> <tr> <td class="ey-formlabel1">item</td> <td class="ey-formlabel1">item1</td> <td class="ey-formlabel1">item2</td> <td class="ey-formlabel1">item3</td> </tr> </tbody> </table> </div> <div id="divintnorecgrid" runat="server" visible="false" style="font-size: 12px; font-family: arial; margin-top: 20px; color: red;"> no record(s) found... </div> <div style="margin-top: 10px;" id="divpaging" runat="server"> <table style="width: 400px;"> <tr> <td> <asp:linkbutton id="lbfirst" text="| < first" runat="server" onclick="lbfirst_click"></asp:linkbutton> </td> <td> <asp:linkbutton id="lbprevious" runat="server" onclick="lbprevious_click" text="| << previous"></asp:linkbutton> </td> <td> <asp:linkbutton id="lbnext" runat="server" onclick="lbnext_click" text="| next >> |"></asp:linkbutton> </td> <td> <asp:linkbutton id="lblast" runat="server" onclick="lblast_click" text="last > |"></asp:linkbutton> </td> <td> <asp:label id="lblpage" runat="server" text=""></asp:label> </td> </tr> </table> </div> <div style="overflow: hidden; display: none;"> <asp:repeater id="rptpaging" runat="server" onitemcommand="rptpaging_itemcommand"> <itemtemplate> <asp:linkbutton id="btnpage" style="padding: 8px; margin: 2px; background: gray; border: solid 1px #666; font: 8pt tahoma;" commandname="page" onclientclick="showprogress();" commandargument="<%# container.dataitem %>" runat="server" forecolor="white" font-bold="true"><%# container.dataitem %> </asp:linkbutton> </itemtemplate> </asp:repeater> </div> </div> my css classes below:
.ey-datatable { background-color: rgb(219,221,221); width: 99.5%; margin-top: 5px; margin-bottom: 2px; } .ey-formlabel1 { font-family: arial; font-size: 12px; text-align: left; padding-top: 3px; padding-bottom: 3px; padding-left: 1px; padding-right: 6px; vertical-align: top; } .alignedrow { vertical-align: top; text-align: center; }
i can't wrong, can give few pointers:
first problem header. have row span. rows spanning have different width. can't sure how browsers react that.
second. best not mix % , px. results vary depending on screen width.
a tip: set widths on first row. enough , makes live alot easier finding out goes wrong. don't need width definition on each row. 1 row fine.
i hope nod in right direction
Comments
Post a Comment