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.
Related
In a column I have a div container which contains two asp labels, one under the other.
<td>
<div>
<h2><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>
</div>
</td>
There is a blank space between the labels and I am trying to remove it.
Below a screenshot in design mode.
I want them to be together without any space in between.
How can I do this?
This happens by the fact that the 'h2' tag has its own browser-specific margin top/bottom style.
You can disable it something like this:
<h2 style="margin-top:0;margin-bottom:0;">...</h2>
<h2 style="margin-top:0;margin-bottom:0;"><asp:Label runat="server" ID="lblEmployeeFullname" Text="Claudie"></asp:Label></h2>
<asp:Label runat="server" ID="lblIdEmployee" Text="34343d-dfadfsf-3433"></asp:Label>
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.
I have a label element as below:
<asp:Label ID="date" runat="server" Text="<%$ Resources:Resource, DATE%>" CssClass="col-sm-4 control-label" />
When I render this in the browser somehow this gets generated to span element as below:
<span id="ctl00_MainContent_FormDate_Date" class="col-sm-4 control-label">Date</span>
which makes it look different on the page.
But when I use text instead of resource:
<asp:Label ID="date" runat="server" Text="Date" CssClass="col-sm-4 control-label" />
this renders correctly:
<label for="ctl00_MainContent_FormDate_Date" class="col-xs-4 control-label">Date</label>
Anyone come a cross this issue and how can I fix the issue to render as <label> when using resources?
Though I know you have already got the solution, I am answering for the future reader of the post.
If you set the Label.AssociatedControlID value it becomes a label element.
If it is not associated to a control or in other words not being used as a label element it becomes a span element.
A label which is not associated with a control is considered as a bad mark up. Hence if the label control is not assigned to a control, instead of placing a label .NET places that as a span element.
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?
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.