I'm working on a website that displays a lot of products in little cards so they all appear in the same format. However, some of the products are displaying in Chrome without their prices, I've checked in other browsers and the issue is only in Chrome.
This is taken from Internet Explorer and shows what the product cards should look like.
And this is the same product in Chrome:
Very helpfully displaying a cost of not there.
HTML - The label in question is lblProductPrice
<div class="index-row">
<asp:DataList runat="server" ID="dlFeaturedProducts" RepeatColumns="5" RepeatDirection="horizontal" RepeatLayout="Flow" >
<itemstyle VerticalAlign="top" />
<itemtemplate>
<asp:Panel ID="pnlProduct" runat="server" defaultbutton="btnBuy">
<div class="gallery-product">
<div class="gallery-product-image">
<asp:HyperLink ID="hlProductImage" runat="server"><img id="imgProduct" runat="server" /></asp:HyperLink>
</div>
<div class="gallery-product-details">
<div class="gallery-product-freight">
<span runat="server" id="divFreeFreight" visible="false"><img src="images/free-delivery.png" alt="Free Shipping On This Item" title="Free Shipping On This Item" /></span>
</div>
<div class="gallery-product-title">
<asp:HyperLink ID="hlProductTitle" runat="server"></asp:HyperLink></strong><asp:Label ID="lblProductID" runat="server" Visible="false"></asp:Label>
</div>
<div class="gallery-product-price">
<asp:Label ID="lblProductPrice" runat="server"></asp:Label> <span class="gallery-product-price-gst">Incl GST</span>
</div>
<div class="gallery-product-usually">
<span id="pnlUsually" runat="server"><asp:Label ID="lblWas" runat="server"></asp:Label><asp:Label ID="lblListPrice" runat="server"></asp:Label></span>
</div>
<div class="gallery-product-blurb">
<asp:Label ID="lblWebBlurb" runat="server"></asp:Label>
</div>
</div>
<input name="hidden" type="hidden" id="UniqueCode" value="" runat="server" />
<div class="gallery-buy-bg">
<div class="gallery-buy">
<asp:TextBox ID="txtQuantity" Text="1" Width="25" MaxLength="4" runat="server" CssClass="textbox" style="text-align:center"></asp:TextBox><br />(quantity)
</div>
<div class="gallery-buy-button">
<div class="grey-button">
<asp:LinkButton ID="btnBuy" runat="server" title="Add to Cart" Text="Add to Cart" CommandName="Add" />
</div>
</div>
</div>
</div>
</asp:Panel>
</itemtemplate>
</asp:DataList>
</div>
VB.Net - I've tried setting the value for lblProductPrice before, after and in the if/else statement, and it makes no difference to either browser.
'Show Product Savings even if discount level on login
If dr("SELLPRICE9") > 0 And dr("pListPrice") = 0 Then
If ((dr("SELLPRICE9")) - dr(c.GetPriceLevel())) > ((dr("SELLPRICE1")) - dr(c.GetPriceLevel())) Then
'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
'lblProductPrice.ForeColor = Drawing.Color.Black
lblListPrice.Font.Strikeout = True
lblWas.Text = "RRP "
lblWas.ForeColor = Drawing.Color.Red
lblListPrice.Text = "$" + FormatNumber(dr("SELLPRICE9"), 2)
lblListPrice.ForeColor = Drawing.Color.Red
Else
lblWas.Text = ""
'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
'lblProductPrice.ForeColor = Drawing.Color.Black
lblListPrice.Text = ""
End If
Else
If (dr("SELLPRICE1")) > (dr("pListPrice")) Then
'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
Else
'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
lblWas.Text = "Save $"
lblListPrice.Font.Strikeout = False
lblListPrice.Text = FormatNumber((dr("pListPrice") - dr(c.GetPriceLevel())), 2)
If (dr("pListPrice") - dr(c.GetPriceLevel())) = 0 Then
lblListPrice.Visible = False
lblWas.Visible = False
End If
End If
'If lblListPrice.Text <= 0 Then
' Dim pnlUsually As HtmlContainerControl = CType(e.Item.FindControl("pnlUsually"), HtmlContainerControl)
' pnlUsually.Visible = False
'End If
End If
lblProductPrice.Text = "$" + FormatNumber(dr("SELLPRICE1"), 2)
End If
Client HTML - IE
<span valign="top">
<div id="ContentPlaceHolder1_dlFeaturedProducts_pnlProduct_15" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15')">
<div class="gallery-product">
<div class="gallery-product-image">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductImage_15" title="2m HDMI V1.4 Cable" href="Computers/Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx"><img src="http://www.globalpc.co.nz/prodimages/CB30201.jpg.axd?maxwidth=165&maxheight=100" id="ContentPlaceHolder1_dlFeaturedProducts_imgProduct_15" alt="2m HDMI V1.4 Cable" border="0" /></a>
</div>
<div class="gallery-product-details">
<div class="gallery-product-freight">
</div>
<div class="gallery-product-title">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductTitle_15" href="Computers/Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx">2m HDMI V1.4 Cable</a></strong>
</div>
<div class="gallery-product-price">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblProductPrice_15">$19.00</span> <span class="gallery-product-price-gst">Incl GST</span>
</div>
<div class="gallery-product-usually">
<span id="ContentPlaceHolder1_dlFeaturedProducts_pnlUsually_15"><span id="ContentPlaceHolder1_dlFeaturedProducts_lblWas_15"></span><span id="ContentPlaceHolder1_dlFeaturedProducts_lblListPrice_15"></span></span>
</div>
<div class="gallery-product-blurb">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblWebBlurb_15"></span>
</div>
</div>
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$UniqueCode" type="hidden" id="ContentPlaceHolder1_dlFeaturedProducts_UniqueCode_15" value="b2cb5ee5-97d4-44a7-99f7-ffa66790ae0c" />
<div class="gallery-buy-bg">
<div class="gallery-buy">
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$txtQuantity" type="text" value="1" maxlength="4" id="ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15" class="textbox" style="width:25px;text-align:center" /><br />(quantity)
</div>
<div class="gallery-buy-button">
<div class="grey-button">
<a onclick="if(!isPositiveInteger(document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').value)){alert('Please enter a numeric value for the quantity');document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').select();document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').focus();return false;};" id="ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15" title="Add to Cart" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$btnBuy','')">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</span>
Client HTML - Chrome
<span valign="top">
<div id="ContentPlaceHolder1_dlFeaturedProducts_pnlProduct_15" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15')">
<div class="gallery-product">
<div class="gallery-in-stock">
<img id="ContentPlaceHolder1_dlFeaturedProducts_imgStock_15" src="../images/in-stock.png" alt="This item is in stock." />
</div>
<div class="gallery-product-image">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductImage_15" title="2m HDMI V1.4 Cable" href="Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx"><img src="http://www.globalpc.co.nz/prodimages/CB30201.jpg.axd?maxwidth=100&maxheight=100" id="ContentPlaceHolder1_dlFeaturedProducts_imgProduct_15" alt="2m HDMI V1.4 Cable" border="0" /></a>
</div>
<div class="gallery-product-details">
<div class="gallery-product-freight">
</div>
<div class="gallery-product-title">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductTitle_15" href="Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx">2m HDMI V1.4 Cable</a></strong>
</div>
<div class="gallery-product-price">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblProductPrice_15"></span> <span class="gallery-product-price-gst">Incl GST</span>
</div>
<div class="gallery-product-usually">
<span id="ContentPlaceHolder1_dlFeaturedProducts_pnlUsually_15"><span id="ContentPlaceHolder1_dlFeaturedProducts_lblWas_15"></span><span id="ContentPlaceHolder1_dlFeaturedProducts_lblListPrice_15"></span></span>
</div>
<!--<div class="index-product-cash-back">
<span id="ContentPlaceHolder1_dlFeaturedProducts_divCashBack_15"><img src="images/cash-back-offer.png" alt="Get CASH back On This Item" title="Get CASH back On This Item" /></span>
</div>-->
<div class="gallery-product-blurb">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblWebBlurb_15"></span>
</div>
</div>
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$ProductID" type="hidden" id="ContentPlaceHolder1_dlFeaturedProducts_ProductID_15" value="CB30202" />
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$UniqueCode" type="hidden" id="ContentPlaceHolder1_dlFeaturedProducts_UniqueCode_15" value="c9e963b7-4f99-4f1a-8165-28219fae0363" />
<div class="gallery-buy-bg">
<div class="gallery-buy">
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$txtQuantity" type="text" value="1" maxlength="4" id="ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15" class="textbox" style="width:25px;text-align:center" /><br />(quantity)
</div>
<div class="gallery-buy-button">
<div class="grey-button">
<a onclick="if(!isPositiveInteger(document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').value)){alert('Please enter a numeric value for the quantity');document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').select();document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').focus();return false;};" id="ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15" AlternateText="Add to Cart" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$btnBuy','')">Add to Cart</a>
</div>
<input type="submit" name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$btnHiddenBuy" value="" id="ContentPlaceHolder1_dlFeaturedProducts_btnHiddenBuy_15" style="display:none;" />
</div>
</div>
</div>
</div>
</span>
HTML from Chrome v2
<div id="ContentPlaceHolder1_dlFeaturedProducts_pnlProduct_1" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolder1_dlFeaturedProducts_btnBuy_1')">
<div class="gallery-product">
<div class="gallery-in-stock">
<img id="ContentPlaceHolder1_dlFeaturedProducts_imgStock_1" src="../images/in-stock.png" alt="This item is in stock.">
</div>
<div class="gallery-product-image">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductImage_1" title="2m HDMI V1.4 Cable" href="Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx"><img src="http://www.globalpc.co.nz/prodimages/CB30201.jpg.axd?maxwidth=100&maxheight=100" id="ContentPlaceHolder1_dlFeaturedProducts_imgProduct_1" alt="2m HDMI V1.4 Cable" border="0"></a>
</div>
<div class="gallery-product-details">
<div class="gallery-product-freight">
</div>
<div class="gallery-product-title">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductTitle_1" href="Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx">2m HDMI V1.4 Cable</a>
</div>
<div class="gallery-product-price">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblProductPrice_1"></span> <span class="gallery-product-price-gst">Incl GST</span>
</div>
<div class="gallery-product-usually">
<span id="ContentPlaceHolder1_dlFeaturedProducts_pnlUsually_1"><span id="ContentPlaceHolder1_dlFeaturedProducts_lblWas_1"></span><span id="ContentPlaceHolder1_dlFeaturedProducts_lblListPrice_1"></span></span>
</div>
<!--<div class="index-product-cash-back">
<span id="ContentPlaceHolder1_dlFeaturedProducts_divCashBack_1"><img src="images/cash-back-offer.png" alt="Get CASH back On This Item" title="Get CASH back On This Item" /></span>
</div>-->
<div class="gallery-product-blurb">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblWebBlurb_1"></span>
</div>
</div>
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl01$ProductID" type="hidden" id="ContentPlaceHolder1_dlFeaturedProducts_ProductID_1" value="CB30202">
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl01$UniqueCode" type="hidden" id="ContentPlaceHolder1_dlFeaturedProducts_UniqueCode_1" value="bdf06fb2-74fe-4848-b648-fce81e25c25c">
<div class="gallery-buy-bg">
<div class="gallery-buy">
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl01$txtQuantity" type="text" value="1" maxlength="4" id="ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_1" class="textbox" style="width:25px;text-align:center"><br>(quantity)
</div>
<div class="gallery-buy-button">
<div class="grey-button">
<a onclick="if(!isPositiveInteger(document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_1').value)){alert('Please enter a numeric value for the quantity');document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_1').select();document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_1').focus();return false;};" id="ContentPlaceHolder1_dlFeaturedProducts_btnBuy_1" alternatetext="Add to Cart" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl01$btnBuy','')">Add to Cart</a>
</div>
<input type="submit" name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl01$btnHiddenBuy" value="" id="ContentPlaceHolder1_dlFeaturedProducts_btnHiddenBuy_1" style="display:none;">
</div>
</div>
</div>
</div>
HTML from IE v2
<span valign="top">
<div id="ContentPlaceHolder1_dlFeaturedProducts_pnlProduct_15" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15')">
<div class="gallery-product">
<div class="gallery-product-image">
<a title="2m HDMI V1.4 Cable" id="ContentPlaceHolder1_dlFeaturedProducts_hlProductImage_15" href="Computers/Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx"><img id="ContentPlaceHolder1_dlFeaturedProducts_imgProduct_15" alt="2m HDMI V1.4 Cable" src="http://www.globalpc.co.nz/prodimages/CB30201.jpg.axd?maxwidth=165&maxheight=100" border="0"></a>
</div>
<div class="gallery-product-details">
<div class="gallery-product-freight">
</div>
<div class="gallery-product-title">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductTitle_15" href="Computers/Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx">2m HDMI V1.4 Cable</a>
</div>
<div class="gallery-product-price">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblProductPrice_15">$19.00</span> <span class="gallery-product-price-gst">Incl GST</span>
</div>
<div class="gallery-product-usually">
<span id="ContentPlaceHolder1_dlFeaturedProducts_pnlUsually_15"><span id="ContentPlaceHolder1_dlFeaturedProducts_lblWas_15"></span><span id="ContentPlaceHolder1_dlFeaturedProducts_lblListPrice_15"></span></span>
</div>
<div class="gallery-product-blurb">
<span id="ContentPlaceHolder1_dlFeaturedProducts_lblWebBlurb_15"></span>
</div>
</div>
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$UniqueCode" id="ContentPlaceHolder1_dlFeaturedProducts_UniqueCode_15" type="hidden" value="b2cb5ee5-97d4-44a7-99f7-ffa66790ae0c">
<div class="gallery-buy-bg">
<div class="gallery-buy">
<input name="ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$txtQuantity" class="textbox" id="ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15" style="width: 25px; text-align: center;" type="text" maxlength="4" value="1"><br>(quantity)
</div>
<div class="gallery-buy-button">
<div class="grey-button">
<a title="Add to Cart" id="ContentPlaceHolder1_dlFeaturedProducts_btnBuy_15" onclick="if(!isPositiveInteger(document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').value)){alert('Please enter a numeric value for the quantity');document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').select();document.getElementById('ContentPlaceHolder1_dlFeaturedProducts_txtQuantity_15').focus();return false;};" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dlFeaturedProducts$ctl15$btnBuy','')">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</span>
Edit
The page in question is our landing page, and it displays a randomly ordered selection of about 30 products (from an SQL table generated by my boss some time ago).
Here are two products side by side:
This is what's confusing me, both products display almost all the same fields. Both have the instock tick, free delivery splotch, and an exta info label underneath. But on has a price and the other doesn't. Is this likely to be a server side problem? The items in question display correctly on every other page.
This is a bit of a guess, but I looked closely at the markup in your HTML, and there is a lone </strong> tag after your hlProductTitle hyperlink:
<div class="gallery-product-title">
<a id="ContentPlaceHolder1_dlFeaturedProducts_hlProductTitle_15" href="Computers/Cables-(Ready-Made)/DVI-HDMI-Cables/Product-Specification-CB30202.aspx">2m HDMI V1.4 Cable</a>
</strong> <!-- <<<== HERE IT IS (I added the newline before it)
</div>
Because there is no matching opening <strong> tag, browsers will try to "fix" this by adding one for you, doing their best guess as to where it should go. Different browsers make different guesses, which could account for why you see a difference. Evidence to support my theory (and a clue for you for next time) is that in your screenshot from IE, the product title is bold, whereas in the Chrome screenshot it is not. Meaning, I believe, that IE is deciding to put the opening <strong> tag before the product heading, and Chrome is putting it goodness-knows-where.
Try adding the matching <strong> tag before the product title tag, and see if that resolves your issue.
Related
How can I solve this?
<div th:if="${showContent}=='true'" id="container-two" >
<div class="container-linux">
<div><img class="col"
style="width:50px;" src="" th:src="#{/images/linux.png}" alt=""><br>
<label >VM Name is</label>
<a style="font-weight: bold;" th:text="${vmnameshowlinux}" ></a><br>
<label >VM IpAddress is</label>
<a style="font-weight: bold;" th:text="${ipaddresslinux}" ></a></div>
<a th:href="#{/launchconsole}" class="btn btn-success">Launch RDP</a>
</div>
<div class="container-windows">
<div><img class="col"
style="width:50px;" src="" th:src="#{/images/windows.png}" alt=""><br>
<label >VM Name is</label>
<a style="font-weight: bold;" th:text="${vmnameshowwin}" ></a><br>
<label >VM IpAddress is</label>
<a style="font-weight: bold;" th:text="${ipaddresswin}" ></a></div>
<a th:href="#{/launchconsole}" class="btn btn-success">Launch RDP</a>
</div>
</div>
`
String showContent="true";
modelandview.addObject("showContent", showContent);
`
i want to show container-two by passing the true value in the showContent object in spring boot thymeleaf project
You should pass a regular boolean:
boolean showContent = true;
modelandview.addObject("showContent", showContent);
And then Thymeleaf should look like:
<div th:if="${showContent}" id="container-two" >
.
.
.
</div>
I have an HTML login form.
I have made some code changes to this area of functionality and Internet Explorer no longer prompts to save the username and password entered.
It did so before my changes.
I have looked at the difference in HTML and the only difference I can see is that the ordering of DOM element attributes has changed.
What might I be doing wrong?
The form currently looks like this:
<form class="forms">
<h1 class="sc-cgHJcJ dmPBnn"><span>Enter your login details</span></h1>
<div class="sc-gzOgki gSqehT">
<label class="sc-iyvyFf fQeNdL" for="username"><span>Username</span></label><input type="text" class="sc-iLVFha eZKzJz sc-hwwEjo iVXrBC" name="username" autocorrect="off" autocapitalize="none" spellcheck="false" aria-label="username" id="username" placeholder="Your username (e.g. email address)">
<div class="sc-kPVwWT gARmdw" role="alert"></div>
</div>
<div class="sc-gzOgki gSqehT">
<label class="sc-iyvyFf fQeNdL" for="password"><span>Password</span></label><input type="password" class="sc-iLVFha eZKzJz sc-hwwEjo iVXrBC" name="password" aria-label="password" id="password" placeholder="Your password">
<div class="sc-kPVwWT gARmdw" role="alert"></div>
</div>
<div class="sc-dYzWWc kcnzuR">
<div class="sc-jtHxuu ktTqKC">
<div>
<button class="sc-laTMn fjNFUg" type="submit">
<div class="sc-hGoxap fqiECM">
<div class="sc-eilVRo gqpUjK">
<div class="sc-eerKOB cTmMQZ">
<div class="sc-emmjRN fOCeSR">
<div class="sc-dymIpo boXqhR sc-cpmLhU bBvrRk"><span class="sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">4</span></div>
<div class="sc-fhYwyz iPvpet sc-cpmLhU bBvrRk"><span class="sc-jzgbtB duATCd sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">4</span></div>
<div class="sc-gFaPwZ dFjfQf"></div>
<span class="sc-gJWqzi ccEJEu sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">4</span>
</div>
<span class="sc-rBLzX goLDfH sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">D</span><span class="sc-bMvGRv jcNXtO sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">E</span><span class="sc-CtfFt drWCKK sc-bnXvFD kDfNZW sc-gisBJw eyFjZA">4</span>
</div>
</div>
<div class="sc-fjmCvl cDDtAg">
<div class="sc-TFwJa cisZhm"><span>Login</span></div>
<div class="sc-TFwJa Ydfnv"><span>Logging in</span></div>
<div class="sc-TFwJa Ydfnv"><span>Logged in</span></div>
<div class="sc-TFwJa Ydfnv"><span>Login</span></div>
<div class="sc-TFwJa Ydfnv"><span>Error</span></div>
<div class="sc-TFwJa Ydfnv"><span>Error</span></div>
</div>
</div>
</button>
</div>
</div>
<div><span class="sc-fOKMvo idczDY"><a aria-label="Forgotten Password" href="/forgotten-password"><span>Forgot your password?</span></a></span></div>
<div class="sc-blIhvV hoftyp"><a class="sc-dUjcNx bHTXTB" aria-label="Create account" target="_blank" href="https://www.hivehome.com/register" rel="external noopener"><span>Create Account</span></a></div>
</div>
</form>
I was toying with some layout for a progress indicator in an ASP.NET project in VS 2013, and I found something odd in the markup that it generated. My .aspx page contains the following code:
<div id="divProgressBar">
<div id="divProgressVisual">
<asp:Image ID="imgCircle1" runat="server" CssClass="progress circle" style="margin-left: 34px;" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine2" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle2" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine3" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle3" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<asp:Image ID="imgLine4" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
<asp:Image ID="imgCircle4" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
<div style="clear: both;" />
</div>
<div id="divProgressLabels">
<span class="labelblock">|<br />Upload File</span>
<span class="labelblock">|<br />Import Into Database</span>
<span class="labelblock">|<br />Perform Comparison</span>
<span class="labelblock">|<br />Export File</span>
<div style="clear: both;" />
</div>
</div>
This div is getting dropped into a master page, for what it's worth. Don't worry about the CSS, because this isn't a layout issue.
When I view the resulting HTML in Firebug, I see this:
<div id="divProgressBar">
<div id="divProgressVisual">
<img id="MainContent_imgCircle1" class="progress circle" src="images/GrayCircle.png" style="margin-left: 34px;">
<img id="MainContent_imgLine2" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle2" class="progress circle" src="images/GrayCircle.png">
<img id="MainContent_imgLine3" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle3" class="progress circle" src="images/GrayCircle.png">
<img id="MainContent_imgLine4" class="progress line" src="images/GrayLine.png">
<img id="MainContent_imgCircle4" class="progress circle" src="images/GrayCircle.png">
<div style="clear: both;"> </div>
<div id="divProgressLabels">
<span class="labelblock">
|
<br>
Upload File
</span>
<span class="labelblock">
|
<br>
Import Into Database
</span>
<span class="labelblock">
|
<br>
Perform Comparison
</span>
<span class="labelblock">
|
<br>
Export File
</span>
<div style="clear: both;"> </div>
</div>
</div>
</div>
divProgressLabels is suddenly nested inside of divProgressVisual! This isn't causing any layout problems in this case, but it's rather weird and I'd like to know why it's doing this and how to stop it.
Change
<div style="clear: both;" />
to
<div style="clear: both;"></div>
See also Are self-closing tags valid in HTML5?.
I want to increase the height and width of the inner box (Arrow is pointing) of the Overlay in the below image using DOJO.
Below is my code. Please let me know where I suppose to add in order to increase the height and width.
<div class="xx-common-overlay" id="overlay-0">
<div class="xx-head">
<p><a class="xx-common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="xx-body">
<div class="xx-main">
<a id="xx-access Accessibility anchor" class="xx-access"></a>
<div class="xx-title">
<h2 style="font-size: 1.6em;">Please select </h2>
</div>
<div class="xx-container">
<h2 style="padding-top: 10px;">Items:</h2>
<div class="xx-container-body">
<p style="padding-top: 5px;">
<select multiple="true" id="ItemsOverlay1" name="Items0" style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect" onchange="setValues(this, 'fromItems','');"></select>
</p>
<input class="xx-btn-arrow-pri" value="OK" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromPlatform','ok');return false;"/>
<input style="margin-left: 10px;" class="xx-btn-arrow-pri" value="Cancel" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromItems','cancel');return false;"/>
</div>
</div>
</div>
You provided code can not be parse, but you could try the following:
find dojoType="dojox.form.CheckedMultiSelect"
change to style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect"
I'm trying to use another template for my ASP.NET Empty Website using Visual Studio 2012. So I copied and pasted some of the codes in my earlier project to this project with a different template, now I get this error:
ASP.site_master' does not contain a definition for 'btnRegister_Click' and no extension method 'btnRegister_Click' accepting a first argument of type 'ASP.site_master' could be found (are you missing a using directive or an assembly reference?)
And here are my codes:
<div id="login-box" class="login-popup">
<img src="http://localhost:12345/CAPSTONE/images/process-stop.png" class="btn_close" title="Close Window" alt="Close" />
<form class="signin">
<div class="control-group normal_text"><h3>My Site Login</h3></div>
<asp:Panel ID="pnlError" runat="server" Visible="false">
<div class="alert alert-error">
<strong>Error!</strong> Invalid username / password.
</div>
</asp:Panel>
<asp:Panel ID="pnlConfirmed" runat="server" Visible="false">
<div class="alert alert-success">
<strong>User Activated!</strong> You may now login.
</div>
</asp:Panel>
<asp:Panel ID="pnlReset" runat="server" Visible="false">
<div class="alert alert-success">
Your password has been changed. You may now login.
</div>
</asp:Panel>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on"><i class="icon-user"></i></span><asp:TextBox ID="txtEmail" runat="server" MaxLength="70" placeholder="Email Address" />
<span class="add-on"><i class="icon-lock"></i></span><asp:TextBox ID="txtPassword" runat="server" MaxLength="50" TextMode="Password" placeholder="Password" />
</div>
</div>
</div>
<div class="form-actions">
<span class="pull-left"><asp:Button ID="btnRegister" runat="server"
class="btn btn-inverse" Text="Register" onclick="btnRegister_Click" /></span>
<span class="pull-right">Forgot Password
<asp:Button ID="btnLogin" runat="server"
class="btn btn-success" Text="Login" onclick="btnLogin_Click" />
</span>
</div>
What should I do?
Inside the code-behind file of your master page, write something like this:
protected void btnRegister_Click(object sender, EventArgs e)
{
// do something
}