Hello guys I just started designing form with asp.net tags and would like to achieve what's on the image exactly. Thanks guy
If i understand you right, this is the code you need:
<asp:TextBox runat="server"></asp:TextBox><asp:TextBox runat="server"></asp:TextBox>
and the result:
Add some styles to make it pretty.
Blockquote
Here is the code with labels (you can also use asp labels):
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox1</label>
</div>
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox2</label>
</div>
and the result:
You can also put the style in the css.
Related
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 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.
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.
I am using HTML control,and want to visible false from the server side with out using attributes runat="Server"
tell me any solution
Runat="Server" has got nothing to do with visibility.
If you want to hide the control (so that its not visible to any visitors to your site) you would simply set its CSS to visibility:hidden; or display: none;. I think this is what you wanted to know.
Wrap your html controls in an asp:placeholder control, and set the visibility on the placeholder.
Example
<asp:placeholder id="plc" runat="server" visible="false">
<h1>Some Content</h1>
<img src="/images/someimage.gif" alt="" />
</asp:placeholder>