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.
Related
I am trying to move the button to the right, and it's on a modal form if that somehow makes a difference, but it's not budging no matter what I do. I cannot create a separate CSS class for the code, just use the universal one.
Here's the code:
<asp:Panel ID="PnlUpdateSubjectPin" runat="server" CssClass="row" Visible="false">
<asp:Panel ID="Panel140" runat="server" CssClass="col-6">
<asp:Button ID="BtnGenNewPin" runat="server" Text="Generate Pin" CssClass="btn-success margin-left: 50px" />
You can't put the style elements in to the "class" you specify for that button.
Use a Style for things you want to add - the CssClass does NOT allow css, but ONLY allows you to specify existing css class(s) you want to use.
So, try this:
<asp:Button ID="BtnGenNewPin" runat="server"
Text="Generate Pin" CssClass="btn-success"
Style="margin-left:25px" />
the above should work just fine. So, don't try to put/shove css into the CssClass setting. You are free to use Style= in above, and it will be respected, and in fact should not mess nor bother with the existing class(s) you specified in the CssClass settings.
CssClass simple does not allow you to add or put css into that setting - only class(s) can be used by that setting.
Use Style -- you should be just fine.
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 have a user control on a page of a website that generates a text box. The textbox has a width specified, but the text box is intermitently being shown at a much smaller width than is specified in the code. I asked the users to send me copies of the "view source" output so that I could compare good and bad results. By "intermittent", I mean similar builds - different computers. Please note that the bad results are ALWAYS displayed on the same "bad" computers (there is more than one user with this problem) and, conversely, the "good" computers (all with the same version of IE7 as the "bad" computers) always display "good" results.
When the page is displayed correctly, the html that is sent to the browser looks like this:
<input name="ShortDescription" type="text" maxlength="100"
id="ShortDescription" class="content" style="width:800px;" />
and when it renders incorrectly, it looks like this:
<input name="ShortDescription" type="text" maxlength="100"
id="ShortDescription" class="content" />
In both cases, the ASP.NET code is:
<asp:textbox id="ShortDescription" runat="server"
CssClass="content" Width="800px" MaxLength="100"> </asp:textbox>
I am not sure why the style tag is getting dropped. The above pages were both viewed in the same browser (IE7) on different computers. The computers have a corporate build so they "should" be configured the same.
I would appreciate any help!
Try setting the TextBox with in the CssClass, or as a style attribute parameter rather than using the Width attribute
<asp:TextBox id="ShortDescription" runat="server" CssClass="content" MaxLength="100" style="width: 800px" />
<style>.content { width: 800px }</style>
<asp:TextBox id="ShortDescription" runat="server" CssClass="content" MaxLength="100" />
Apply the min-width property.
In Your CSS Style Sheet
.Textbox
{
min-width:100%;
}
In Your *.aspx
<asp:TextBox CssClass="TextboxStyle" placeholder="Enter the Title" runat="server" ID="TextBox1"></asp:TextBox>
This will update your text box
In the past I've found that setting the width through your class itself, instead of using the width property of the textbox will make sure the control is rendered properly.
asp:textbox, which compiles to an input tag does not have a "width" attribute according to w3. It supports the "size" attribute. IE(678) would probably have a better time with the standard, where as other browsers are... looser in their interpretation.
http://www.w3.org/MarkUp/1995-archive/Elements/INPUT.html
for fix the width of text box
take one skin file and put the below code...
for example "skinFile.skin"
<textbox runat="server" width="200px"/>
......................................
after that put the following code into your aspx page.
Theme="SkinFile
for example...
<%# Page Language="C#" MasterPageFile="~/AdminMaster.master" AutoEventWireup="true" CodeFile="stu_resgistration.aspx.cs" Inherits="AdminSide_stu_resgistration" Title="Untitled Page" Theme="SkinFile"%>
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"