html fieldset width enlarge after pressing f12 for various platform view
Question
Answers
-
User1535942433 posted
Hi larnvok09,
As far as I think,the tree structure expands the fieldset,so I suggest you could set min-width property.
By the way, I suggest you could write the same style in the public <style>.
<style> fieldset { min-width: 0; } .fieldsetsecond { border: 1px solid #cccccc; width: 100px; height: 80px; border-radius: 5px; } </style> <div class="menuslider1" id="menuslider1"> <div class="divbuynowimg"> <img src="images/btn_buy_now.fw.png" /> </div> <div class="divcustomerinfo" style="; padding-left: 100px; padding-top: 50px;"> <table style="width: 600px; height: auto;"> <tr valign="top"> <td width="300px"> <table> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px"> <div class="divbuynowpanelfont">Customer Name</div> </td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="tbCusName" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px"> <div class="divbuynowpanelfont">Delivery Address</div> </td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="tbCusAddressStreet" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="txtCusAddressCity" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="txrCusAddressPoscode" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:DropDownList ID="ddlstate" runat="server" Width="60%" Height="25px" CssClass="ddlcss" /></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <div class="divbuynowpanelfont">Mobile Phone</div> </td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="txtCusMobilePhone" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <div class="divbuynowpanelfont">Email</div> </td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <asp:TextBox ID="txtEmail" runat="server" Width="200px" Height="20px" CssClass="txtbox"></asp:TextBox></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"></td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px"> <div class="divbuynowpanelfont">Quantity</div> </td> <td width="25px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="250px" height="21px" style="padding-left: 10%"> <div style="; display: inline-flex;"> <div class="divbuynowpanelfont" style="float: left;"> <asp:LinkButton ID="lbminus" Style="text-decoration: none; float: right;" Text="-" runat="server" /> </div> <asp:TextBox ID="txtQuantity" runat="server" Text="1" Width="50px" Height="20px" CssClass="txtbox" Style="text-align: center;"></asp:TextBox> <div class="divbuynowpanelfont" style="float: right;"> <asp:LinkButton ID="lbadd" Style="text-decoration: none;" Text="+" runat="server" /> </div> </div> </td> <td width="25px"></td> </tr> </table> </td> <td width="300px"> <table> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px"> <div class="divbuynowpanelfont">Choose Your Delivery Method: </div> </td> <td width="0px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px" height="21px"> <div class="divToggleButton1" style="display: inline-flex;"> <div style="float: left;"> <fieldset id="fieldset01" style="border: 1px solid #cccccc; width: 100px; height: 80px; border-radius: 5px;"> <asp:RadioButton ID="rb01" runat="server" GroupName="rb01grp" /> <%--<asp:CheckBox ID="CheckBox1" runat="server" />--%> <div class="divbuynowpanelfont2" style="padding-left: 30%; margin-top: -20%;">Standard</div> <div class="divbuynowpanelfont2" style="padding-left: 30%;">Delivery </div> <div class="divbuynowpanelfont2" style="padding-bottom: 30%; padding-left: 30%;">Est. Arrival</div> </fieldset> </div> <div style="float: right;"> <fieldset id="fieldset02" style="border: 1px solid #cccccc; width: 100px; height: 80px; border-radius: 5px;"> <%--<asp:CheckBox ID="chk01" runat="server" onchange="return javascript:changefieldset();" />--%> <div class="divToggleButton2"> <asp:RadioButton ID="rb02" runat="server" GroupName="rb01grp" /><%--<asp:CheckBox ID="CheckBox2" runat="server" />--%> </div> <div class="divbuynowpanelfont2" style="padding-left: 30%; margin-top: -20%;">Express</div> <div class="divbuynowpanelfont2" style="padding-left: 30%;">Delivery </div> <div class="divbuynowpanelfont2" style="padding-bottom: 30%; padding-left: 30%;">Est. Arrival</div> </fieldset> </div> </div> </td> <td width="0px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px"> <div class="divbuynowpanelfont">Pay By</div> </td> <td width="0px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px" height="21px"> <div class="divToggleButton3" style="display: inline-flex;"> <div style="float: left;"> <fieldset class="fieldsetsecond"> <%--<asp:CheckBox ID="chk01" runat="server" onchange="return javascript:changefieldset();" />--%> <asp:RadioButton ID="rb03" runat="server" GroupName="rb02grp" /> <%--<asp:CheckBox ID="CheckBox3" runat="server" />--%> <div class="divbuynowpanelfont2" style="padding-left: 20%; margin-top: -10%;">Bank</div> <div class="divbuynowpanelfont2" style="padding-left: 20%;">Transfer</div> </fieldset> </div> <div style="float: right;"> <div class="divToggleButton4"> <fieldset class="fieldsetsecond"> <%--<asp:CheckBox ID="chk01" runat="server" onchange="return javascript:changefieldset();" />--%> <asp:RadioButton ID="rb04" runat="server" GroupName="rb02grp" /><%--<asp:CheckBox ID="CheckBox4" runat="server" />--%> <div class="divbuynowpanelfont2" style="padding-left: 30%; margin-top: -10%;">FPX</div> <div class="divbuynowpanelfont2" style="padding-left: 30%;">Online Banking</div> <p> </p> </fieldset> </div> </div> <div style="float: right;"> <div class="divToggleButton5"> <fieldset class="fieldsetsecond"> <%--<asp:CheckBox ID="chk01" runat="server" onchange="return javascript:changefieldset();" />--%> <asp:RadioButton ID="rb05" runat="server" GroupName="rb02grp" /><%--<asp:CheckBox ID="CheckBox5" runat="server" />--%> <div class="divbuynowpanelfont2" style="padding-left: 20%; margin-top: -10%;">QR Pay</div> <div class="divbuynowpanelfont2" style="padding-left: 20%;">Maybank</div> <p> </p> </fieldset> </div> </div> </div> </td> <td width="0px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px" height="21px"></td> <td width="0px"></td> </tr> <tr> <td width="0px"></td> <td width="25px"></td> <td width="300px" height="21px"></td> <td width="0px"></td> </tr> </table> </td> </tr> </table> </div> </div>Result:
Best regards,
Yijing Sun
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
