I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
Related
I have a fieldset with a div inside of it with labels and textboxes, labels and dropdowns as well as labels with checkboxes. Labels w/ textboxes align well, Labels w/ dropdown aligns well. However, i cannot get the checkbox to align with the label at all. What am i doing wrong?
<div class="col1">
<label id="lblVehicleID" for="txtVehicleID" class="vehicle_label">Vehicle ID:</label>
<asp:TextBox ID="txtVehicleID" runat="server" class="vehicle_input"></asp:TextBox>
<label id="lblName" for="txtVehicleName" class="vehicle_label">Vehicle Name:</label>
<asp:TextBox ID="txtVehicleName" runat="server" class="vehicle_input"></asp:TextBox>
<label id="lblCategorization" for="txtCategorization" class="vehicle_label">Categorization:</label>
<asp:TextBox ID="txtCategorization" runat="server" class="vehicle_input"> </asp:TextBox>
<label id="lblDomicileCountry" for="ddlDomicileCountry" class="vehicle_label">Domicile Country:</label>
<asp:DropDownList ID="ddlDomicileCountry" runat="server" CssClass="vehicle_dd"></asp:DropDownList>
<label id="lblUSOrganized" for="chkUSOrganized" class="vehicle_label">US Organized/Established:</label>
<asp:CheckBox ID="chkUSOrganized" runat="server" ></asp:CheckBox>
<label id="lblOfferedToNonUS" for="chkOfferedToNonUS" class="vehicle_label">Offered to Only Non-US:</label>
<asp:CheckBox ID="chkOfferedToNonUS" runat="server"></asp:CheckBox>
</div>
Here is the CSS:
.col1 {
width: 500px;
border: 1px solid black;
float: left;
padding: 5px;
}
.vehicle_label {
float:left;
width: 190px;
text-align:right;
padding-right:12px;
margin-top:12px;
clear:left;
font-family:Arial, Helvetica, sans-serif;
}
.vehicle_input, .vehicle_dd {
margin-top: 12px;
width:175px;
}
I have tried but to no avail:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
Any help would be greatly appreciated! I know there are questions similar to this one but have not been able to figure out what i am doing incorrectly.
Thank you
The Checkboxes were just floating next to the other input elements, try clearing the float with a clearfix after the input elements;
<div class=".clearfix"></div>
I have created a working demo of your code here;
http://jsfiddle.net/BmM2x/1/
Given the following markup
<div id="newItems" class="literaltext" >
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> Click
<a href="Shareholder Letter Jan 2013_Final.pdf" >here</a>
to read our President's letter to shareholder's for 2013
</p>
<br />
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> <span >Click
<a href="Calc.aspx" >here</a>
to run our <strong>Return on Investment Calculator</strong> to see how the economics of using <span class="green"><b>EnerBurn®</b></span> can work for your fleet.</span>
</p>
<br />
<asp:Literal ID="LiteralWelcome" runat="server"></asp:Literal>
</div>
and the following css;
#newItems {
display: inline-block;
}
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
}
#newItems span {
vertical-align: middle;
text-align: center;
margin-top: 0;
padding-top: 0;
}
I cannot get the text to the right of the image to align with the image. The image always appears much higher then the text. If i could vertically align the text in the middle of the height in the p tag it would at least look about right. I've tried about 50 variations, this being the latest.
vertical-align:middle;
on the img rule seems to work:
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
vertical-align:middle;
}
jsFiddle example
I am trying to display an address which includes the following information: Title, division, address1, address2, town/state/zip, and country (5 seperate lines worth of data). The problem is sometimes the company may only have the title, address1, and town/state/zip yet other times it may be all but address2. This is determined upon a db record request server side. Therefore how can I make my output look proper when some of my labels will be blank? I would like div's that contain an empty span to be essentially collapsed/removed. My only idea of how was to use jquery and a selector to find all divs with blank spans (since thats all an asp.net label really is) and then remove those divs however this seems like such bad form. Is there any way to do this with css? Possible Code would be something like: $('span:empty:only-child').parent('div').remove();
Picture Examples (Ignore spacing/indentation issues which I will fix)
Missing Division, Address2, and Country
All Possible Fields
The Html
<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
<div class="test">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
</div>
The CSS
.test {
position: relative;
top: 0px;
left: 0px;
height: 12px;
width: 300px;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
Could you restruture your HTML?
HTML
<div style="position:relative; top:150px; left: 113px;">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
CSS
.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
position: relative;
top: 0px;
left: 0px;
width: 300px;
display: block;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
jsFiddle http://jsfiddle.net/LkFSV/
jQuery code:
$(document).ready(function(){
$('div').each(function() {
if ($(this).find('span').text() == '') {
$(this).hide();
}
});
});
http://jsbin.com/axaxut/1/edit
Unfortunately, there are no parent selectors in CSS. If there was, you could do something like:
span:empty:parent { display: none; }
Your best bets are the jQuery that you already have or to do it server side, I would personally say that server side is your best option.
Since this is asp.net code, you can check from server side code if the address2 is empty and simply hide the control.
if(string.IsNullOrEmpty(lblBillingAddress2.Text))
lblBillingAddress2.Visible = false;
I have an ASP.Net Hyperlink with a set height. The text is rendered at the top left of it. How do I vertically center it (-the text)?
(In C# I'd have: label1.TextAlign = ContentAlignment.MiddleCenter; . How is it done in ASP.Net?)
Tried the following but it doesn't work (neither on FF nor on IE).
<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/WebForm1.aspx" runat="server" CssClass="MyClass" BackColor="White"
Height="100px" Text="MyText" Width="200px" ></asp:HyperLink>
</div>
</form>
And:
.MyClass
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
Add the following styles to your HyperLink:
display:table-cell;
text-align:center;
vertical-align:middle;
If you are going to reuse that style is better to define a class:
<asp:HyperLink ... class="myClass" >HyperLink</asp:HyperLink>
and then in your stylesheet:
.myClass{
display:table-cell;
text-align:center;
vertical-align:middle;
}
Or add the styles inline:
<asp:HyperLink ... style="display:table-cell;text-align:center;vertical-align:middle;" >HyperLink</asp:HyperLink>
Add folowing attributes to the CssClass or the inline style:
{
display: table-cell;
vertical-align: middle;
line-height: 32px;
}
note that replace "32px" with your height of Hyperlink.
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.