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>
Related
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.
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.
I try to set two control in a td.
1. use a panel. as follow.
<td style="display: inline;">
<asp:Panel ID="pContainer" runat="server" Wrap="false">
<telerik:RadTextBox ID="rtxtBookingID" runat="server"></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvBookingID"
runat="server" ControlToValidate="rtxtBookingID" ErrorMessage="|Booking ID"
Display="Dynamic"></asp:RequiredFieldValidator>
<telerik:RadButton ID="rbtnOpen" runat="server" Text="Browse" OnClientClicked="openViewWindow()"/>
</asp:Panel>
</td>
how to solve the problem.
if I use two td to place the two control . but the first control in the td will gernerate a div. so the two control distance is far?
As long as it works and you get ok behaviour you are fine and for layout issues you should use css. The way you place the controls on the page also depends on overall page design and structure, keep in mind that usage of tables to control layout is not promoted anymore and you should use divs and css whenever possible... again depending on whole page design of course.
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 to create a web form in ASP.NET.
this is my HTML:
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="label" AssociatedControlID="DropDownList1"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="label" AssociatedControlID="TextBox1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label3" runat="server" Text="" AssociatedControlID="Button1"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
Is this the most customizable HTML code by CSS?
Do you usually write a different markup?
Your HTML looks fine to me. I wouldn't personally use all those divs but I also don't know your exact requirements.
Some people consider a a form to be a list and will code it as:
<ul>
<li>
<label ... />
<input ... />
</li>
</ul>
I don't do it this way and it depends on how you wish to describe your data.
Untimately your main consideration is how you want to describe the data you're marking up. What is the most semantic way and how does that fit in with how you want to style the data. Usually there's a middle ground if you've considered both things well.
I would also consider grouping your form fields logically using a <fieldset>. This will give you something extea to hook into with your CSS also.
We created wrapper controls that do pretty much what you described. Each of our server controls emits a div with a specified class, a label (if label text is set) and the control itself.
We've found this to be the absolute cleanest way to get the markup we want when it goes to the client; and it results in non-table forms.
We also have several classes defined such as "row", "shortRow", etc. that set the appropriate width of the outer div and others which control the label and control width.