Input element not aligning "flush" to DIV container - asp.net

I have been laying out a GUI uing ASP.NET and find I am confused by the rendering of the <asp:TextBox /> control. It seems as though some default margin is added to the left and right of the <input> control that is rendered by the ASP.NET TextBox. Below is an example of my code. The resultant <input> element does not align flush to the container <div>, even thought the text element above it ("Some Text") is aligned flush.
<div style="float:left;">
<b>Some Text</b>
<asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;" />
</div>
Quite by accident I found that if I first added a <p /> element as the first element in the <div> that the <input> element would align flush. Here is an example ...
<div style="float:left;">
<p />
<b>Some Text</b>
<asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;" />
</div>
Does anyone know why this is? Why does the <input> element not align flush to the <div>, yet when adding a <p /> do the <div> it does?
UPDATE - I found the issue was Internet Explorer compatibility mode. It was enabled and therefore not following the CSS rules. After disabling compatibility mode the textbox lined up properly. Thanks for all the answers. They were ALL great and helped me track down the problem. +1 to all. I answered the post so as to make it easier for future readers to find the answer.

I don't know what asp does with this and your p element is invalid in html as you have it. Remove that.
You probably need to set your padding or margin to zero on the input element.
Are you using a doctype?

I don't see any problem when I test your example, the TextBox is flush to the edge of the div at the top, right and bottom (with Some Text on the bottom left).
There must be other CSS affecting your layout.
I'd suggest using Firebug, IE's F12 developer tools or Chrome's Ctrl-Shift-J developer tools (dependent on your browser) to have a look at the HTML that's created. That should give you the answers you need.

I believe this is because <p> is a block element. You can do what you are wanting to do by adding a div around your inner content (nesting a div inside your existing div)
<div style="float:left;">
<div>
<b>Some Text</b>
<asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;" />
</div>
</div>

check if you have correct doctype on top of your page
use vertical-align style in the text container div: <span style="vertical-align:middle; font-weight:bold;">Some Text</span>
.
<div style="float:left;">
<span style="vertical-align:middle; font-weight:bold;">Some Text</span>
<asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;" />
</div>

I discovered what the issue was. I was using Internet Explorer v8 with compatibility mode enabled. I am not sure why it was enabled but as soon as I disabled compatability mode the textbox aligned just as it should.

Related

<a> tag not repeating correctly in asp:repeater

I have a repeater that shows a list of albums and each div is wrapped by a <a> tag. Ideally I would be able to click on the image and it would redirect me to the full album.
But what is actually happening that for some reason the <a> tag when spawned by the repeater does not wrap around the divs but instead just appears before the div it should be wrapping. See below...
and my code
<asp:Repeater runat="server" DataSourceID="Sqlds_Albums">
<ItemTemplate>
<div class="col-sm-4">
<a href="\">
<div class="image-card" style="background-image: url('<%# Eval("PhotoID","../Media/Gallery/{0}.jpg") %>')">
<div class="card-text-bottom">
<div class="album-link">
<asp:HyperLink ID="albumLink" Font-Bold="true" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("AlbumID","~/Album.aspx?AlbumID={0}") %>' />
</div>
<div class="album-nophotos">
<asp:Label ID="lbl_NofPhotos" runat="server" Text='<%# Eval("TotalPhotos","{0} Photos") %>'></asp:Label>
</div>
<div class="album-visits">
<asp:Label ID="lbl_NofVisits" ForeColor="#333333" Font-Size="11px" runat="server" Text='<%# Eval("NofVisit","(Visited {0} times)") %>'></asp:Label>
</div>
</div>
</div>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
Rendered HTML
<div class="col-sm-4">
<a href="\">
</a>
<div class="image-card" style="background-image: url('../Media/Gallery/3568.jpg')"><a href="\">
</a>
<div class="card-text-bottom"><a href="\">
</a>
<div class="album-link"><a href="\">
</a><a id="Body_ctl00_albumLink_0" href="Album.aspx?AlbumID=99" style="font-weight:bold;">2017 Photos</a>
</div>
<div class="album-nophotos">
<span id="Body_ctl00_lbl_NofPhotos_0">24 Photos</span>
</div>
<div class="album-visits">
<span id="Body_ctl00_lbl_NofVisits_0" style="color:#333333;font-size:11px;">(Visited 683 times)</span>
</div>
</div>
</div>
What I tried
Used all the asp: hyperlinks, imagebutton, button etc but no luck.
as usual any guidance greatly appriciated.
EDIT
The problem was the hyperlink inside the .album-link div. Removing it fixed the issue but as recommended below will try to use a different approach to a link div.
In a nutshell, you're trying to do this:
<a><div></div></a>
Technically speaking, that's not valid HTML only valid for HTML5+, and not for HTML4. Under HTML4, <div> is a block-level element, <a> is an inline element, and in the strictest, most standards-compliant sense, inline elements are not allowed to contain block level elements. I know it's a pain; I used to do it all the time, too. But modern browsers now enforce this more strictly than they used to.
Since you're looking at album covers that are effectively images, one option is to use an actual img element, instead of setting the background on a div. This new element would fill the contents of the parent div. Then you can use css to overlay your labels on top of the image, and since img is an inline element you can nest that inside of your original <a> element.
If you have your heart set on keeping one div, the best solution I've seen is here:
Make a div into a link
If I had any clout with the W3C, I'd just add a new block-level link element already, or maybe just allow an href attribute on a few existing block-level elements.
Update:
Reading more on this, you might be able to fix this just by changing your DOCTYPE. The symptoms in the question are consistent with a browser treating this as HTML4, rather than HTML5. HTML4 still has the block/inline distinction, but HTML5 allows <a> to be either "flow-content" (block) or "phrasing-content" (inline).
With that in mind, this should be legal as long your browser knows to interpret this as an HTML5 document, rather than HTML4, which you can do by setting a doctype (which you should do anyway). Then the browser should stop needing to mangle your HTML to produce a compliant DOM.

Ensuring label and checkbox start on the same line

Is there a simple way to do this? I have a checkbox and some text defined like so in an aspx file:
<div id="div01" class="someClass" runat="server">
<asp:CheckBox ID="chkBox01" Checked="True" runat="server" />
<asp:Label ID="lblSomeText" runat="server" Text="" meta:resourcekey="lblSomeText1"></asp:Label>
</div>
..the problem is that when rendered we have a checkbox and a span, and when the label's text is long enough the checkbox appears above the label, rather than at the left. The resulting html structure looks like:
<div>
<input type="checkbox"></input>
<span>some fairly long text</span>
</div>
I'd like to force that checkbox to be on the same line as the label no matter the text length. I can do this in html easily enough but is there a way to ensure it when coding the web components? I'm not a CSS pro and have tried some float:left and float:right stuff to no avail.

asp:Button having position:fixed/absolute is not clickable on firefox nor google chrome

I am writing code in ASP.NET.
I have a button that is clickable on IE but not on FF nor Google Chrome.
I've discovered that the reason lays on the fact that its position: absoulute OR position:fixed
Here's the code:
<div style="padding-top:50px";>
<div id="divInfoBox" runat="server" style="padding-top:5px; height:250px;">
<div style="position:fixed; padding-left:-5px; ">
<asp:ImageButton CssClass="attachmentImageButton" ID="btnAttachment" runat="server" Visible="false"
ImageUrl="~/Style/images/attachment.png" onclick="btnAttachment_Click" />
</div>
</div>
</div>
How to make it be clickable on all browsers?
My guess is that the first two div elements are on top of the ImageButton and therefore it is not clickable.
I have no clue why is that (be glad to find out the exact reason). All I know is that the solution is adding the following:
z-index:5
And that should do the trick.
Good luck
p.s.: if 5 isn't enough, try adding higher value.

ASP.NET and HTML issue

I have a div inside a repeater (ItemTemplate) with the following markup
<div class="bottle listing">
Now for some reason this is being rendered as
<divclass="bottle listing">
Which breaks the page. This is only occurring infrequently and I haven't been able to nail down if it is only occurring in some browsers. Check out this site please:
http://www.myerwine.com.au/whites/chardonnay/4/16.aspx?page=2
I am viewing it in IE8, but I have been told this page is sometimes broken in Firefox and Chrome. When viewing the source in IE see line 415 "divclass="bottle listing"
Here is a portion of my repeater:
<asp:Repeater ID="repResults" runat="server" OnItemDataBound="repResults_DataBound">
<ItemTemplate>
<div class="row listing">
<div class="bottle listing">
............
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Any ideas??
Actually the real answer was because I was using a White space filter and that in turn was removing spaces in the wrong places.
I added a second space
<div class="bottle listing">
And it fixed the problem, if anyone can explain why this solved the problem I would love to hear it.

ASP button is creating a DIV Tag and are not aligning in-line

I am facing a bizzare issue. The asp:Buttons are creating div tags and are aligning vertically but not horizontally. I want them to align horizontally or in css way "inline". can anyone suggest a work around to this one. or can you tell me what I need to do get things working. All other asp buttons are aligning inline in the page except of these three.
The alignment issue is in IE 7-9.
Things look good in Chrome and Firefox
This is the markup in asp:
<td class="FieldsetButtons" align="right">
<asp:Button id="y" runat="server" Width="100px" Text="Apply"
Enabled="False" onclick="y_Click" ValidationGroup="mail"
meta:resourcekey="yResource1"></asp:Button>
<asp:Button id="p" runat="server" Width="100px" Text="Verify"
ENABLED="False" onclick="p_Click" ValidationGroup="mail"
meta:resourcekey="pResource1"></asp:Button>
<asp:Button id="l" runat="server" Width="100px" Text="Reset"
CausesValidation="false" onclick="l_Click"
meta:resourcekey="lResource1"></asp:Button>
</td>
This is the markup that is being created in HTML:
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_yPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$y" value="#Apply#" id="ctl00_ContentPlaceHolder1_lServer1_y" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_pPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$p" value="#Verify#" id="ctl00_ContentPlaceHolder1_lServer1_p" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_lPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$l" value="#Reset#" id="ctl00_ContentPlaceHolder1_lServer1_l" style="width:100px;" />
</div>
Float them all to the left or right.
Add this to your style sheet:
.FieldsetButtons div {float:right;width:100px;}
That will make all child divs align horizontally right and should be browser friendly.
What does your style class FieldsetButtons contain? My guess is that something in your CSS is messing it up. Maybe consider using Firebug to determine what style is affecting the layout of those buttons.
you could use table inside and create a single row in it with 3 columns...
`
`
I'm thinking that the meta:resourcekey tags are generating the divs to be able to apply styling from the resource file, but i have not tested this theory. Have you tried a test without the meta:resourcekey tags to see if the divs go away?

Resources