Viewing from a desktop my label and two textbox controls are aligned horizontally. However when the user views the site on mobile I would like the textboxes to stack on top of each other. I am using a media query to adjust to a mobile view. All the other lines stack fine (with the textbox under the label) The problem with the address is that I have two textboxes, I would like one on each line. Any suggestions? Any questions let me know thanks
Current CSS
.row { clear: none; width: 100%; overflow: hidden; margin: 5px 0; }
.label { float: left; text-align: right; margin-right: 10px; width: 130px;}
.value { float: left; text-align: left;}
html
<div class="row">
<div class="label">
<asp:Label ID="lblSiteAddress" runat="server" Text="Site Address"></asp:Label>
</div>
<div id="value">
<asp:TextBox ID="txtSiteAddress" runat="server" Width="192px" Height="22px"></asp:TextBox>
<asp:TextBox ID="txtSiteAddress2" runat="server" Width="192px" Height="22px"></asp:TextBox>![enter image description here][1]
</div>
</div >
Try this:
.value input[type='text'] {
display: block;
clear: both;
/* Additional style here */
}
Related
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 have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).
I'm trying to do what I thought is going to be the simples thing on earth. I'm having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).
So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.
I've been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.
I thought this should work:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
Also tried:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
z-index: 10;">
</div>
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
There is the css:
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
}
.HPimgBox
{
position: relative;
top: -10px;
right: 20px;
width: 170px;
z-index: 10;
}
Any ideas? Thanks in advanced.
Hey i think your code is some mistake please manage your code according to you and some change to your css file as like this
HTML
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
z-index: 10;">
Hello
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
</div>
Css
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color:red;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
position: relative;
}
#HPItemLink
{
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border:solid 2px yellow;
}
Live demo check here http://jsfiddle.net/8yg49/1/
I came up with a somewhat crooked idea, but i'm short in time so if it works for now it's fine with me.
I'll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.
it goes something like this:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton>
</div>
</div>
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>
This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the 'click' affect.
I have a single line (left screen to right side) that I want to format so that the form look justified regardless the number of elements as the style is repeated (between 2 and 5 elements)
Why are the div tags overlapping each other when I inspect the following rendered HTML?
<div class="grid_7 ">
<div class="grid_2">
<asp:TextBox ID="TextBoxFirstName" runat="server" Text='<%# Bind("F1FirstName")%>'></asp:TextBox>
</div>
<div class="push_1 grid_2 float-left ">
<asp:Label Text="Last Name: " ID="LastName" runat="server" />
</div>
<div class="grid_3 float-left">
<asp:TextBox ID="TextBoxLastName" runat="server" Text='<%# Bind("F2LastName")%>' />
</div>
</div>
[EDIT]`.float-left
{
float:left;
}
.float-right
{
float:right;
}`
.container_12 .push_1 {
left: 80px;
}
.container_12,
.container_16 {
padding: 0 10px 0 10px;
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
}
.grid_12 {
display: inline;
float: left;
margin-left: 0px;
margin-right: 0px;
}
All is wrapped in the "container_12" and "grid_12" within that container within the master page. Grids are evenly spaced portions within the container so I will not include that code. Pushes/pulls are left right movements of the div in and all defined with "position:relative" the style float-left was my attempt to manually align these divs and simply assign the property "float-left" Please let me know if more is needed.
You're going to need to provide all applicable styles from your stylesheet.
eg: grid_7, grid_2, grid_3, push_1, etc
I'm trying to layout field labels and values like this:
Name: Bob
Age: 25
Occupation: Code Monkey
The relevant HTML is
<div class="field">
<span class="reset">End Time:</span>
<span>05:00pm</span>
</div>
<div class="field">
<span class="reset">Items:</span>
<span></span>
</div>
<div class="field">
<span class="reset">Repeats:</span>
<span>Never</span>
</div>
And the relevant CSS is:
div.field {
margin-bottom:10px;
}
span.reset {
display: block;
float: left;
margin-right: 0.5em;
text-align: right;
}
Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.
I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.
Is there any way I can fix this problem without drastically changing the XHTML?
Thanks,
Don
Add this to your CSS clear: left;:
div.field {
clear:left;
margin-bottom:10px;
}
This will force it to the next line below.
If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:
div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }