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.
Related
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 a lot of code that I am reworking in which a single item is wrapped in a div block with a single linked cssstyle. There doesn't seem to be any real difference between wrapping the .Net object in the div and applying the style with the "cssstyle" property. Is there any real difference?
<div class="grid_1">
<asp:FormView ID="FormView8" runat="server" DataSourceID="odsInst">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" ToolTip='<%# Eval("TestScoresPageNrStudents")%>'>(?)</asp:LinkButton>
</ItemTemplate>
</asp:FormView>
</div>
vs
<asp:FormView ID="FormView8" runat="server" DataSourceID="odsInst" CssClass="grid_1">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" ToolTip='<%# Eval("TestScoresPageNrStudents")%>'>(?)</asp:LinkButton>
</ItemTemplate>
</asp:FormView>
The difference would be in the first case, it would render:
<div class="grid_1">
<table>...</table>
</div>
versus:
<table class="grid_1">...</table>
This would have an impact on how you would be able to design your css. My thought is that the first case (the <div>) would be preferable since it would gain more flexibility in designing your css classes -- mainly, you would not be restricted to being solely within a table. Of course, if the grid_1 class is solely for styling tabular data, then the second case would be fine.
It depends on what you need, but basically I guess you should be OK with the second approach since the ASP.NET controls will render some HTML element with the class attribute set to what you specified in CssClass="...".
I think it's best if you look at the HTML code rendered by the ASP.NET controls and if that's OK for you, then you can use the second approach (CssClass="...").
On the other hand, some controls might not exactly render the HTML code you need. E.g. the GridView probably renders a TABLE - if for some reason you really need a DIV element, then you'll have to wrap it as shown in approach one.
If you're keeping this a single item, no. However keep in mind, CSS priority is based on nested levels.
The lower the CSS is applied, the higher the priority it takes over other style classes.
Also, if you add more elements within this div, they will be effected if you keep the style on the container div.
In the first case, the "grid_1" class attribute is applied to the container tag.
In the second case, the "grid_1" class attribute is applied to the main tag of the asp:FormView control.
It is possible to define custom CSS rules for different tags, whose class equals "grid_1"
I've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?
<div style="display: inline;">
<label>
Department:</label>
<dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
</dx:ASPxComboBox>
<label>
Production Date:</label>
<dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy"
ondatechanged="productionDatePicker_DateChanged">
</dx:ASPxDateEdit>
</div>
Sounds like the DevX controls have some CSS that you'll need to override.
For starters, I'd try adding the !important flag to the style:
<div style="display: inline !important;">
If that doesn't work, switch back to the RadControls. They are far superior :)
Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
[CSS] add this line on your css
.DXControlsInline {display: inline-table;}
[ASPx] add CssClass="DXControlsInline" on controls you want to make inline
<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server" CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline" ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox>
Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html
The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox, define a CssClass property to it with the following rule:
<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>
.txtStyle {
display: inline-block;
}
I've prepared a small sample to demonstrate how it works. See also CSS display Property.
UPDATED:
When a caption is specified for ASPxTextBox, it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.
Source
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"
when I try to create a number of Checkboxes, I have strange spaces inserted:
image
<td style="width:85%;white-space:nowrap;" colspan=3>
<asp:CheckBox ID="rdoSchool" runat="server" Text="School (NSL)" />
<asp:CheckBox ID="rdoSFS" runat="server" Text="Summer Food Service" />
<asp:CheckBox ID="rdoOther" runat="server" Text="Other (Specify)" /> <asp:TextBox ID="txtOther" Width="125px" runat="server" />
</td>
How can I make the label closer to the checkbox?
This isn't default styling, and is most likely caused by your CSS. Use a tool like Firebug (on Firefox) or Developer Tools on IE8 to find the applied CSS rules (Should be F12 either way).
Take a look at the markup the CheckBox control generates.
... "Now there's your problem" - Adam Savage, Mythbusters.
Basically the CheckBox control (along with the RadioButtonList control) generates crappy markup. One way to fix this, is to extend and override the Render method to implement some sensible markup-generation code. Another option is to force the HTML-tables the control generates into place with some clever CSS tricks.