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"%>
Related
I have a label element as below:
<asp:Label ID="date" runat="server" Text="<%$ Resources:Resource, DATE%>" CssClass="col-sm-4 control-label" />
When I render this in the browser somehow this gets generated to span element as below:
<span id="ctl00_MainContent_FormDate_Date" class="col-sm-4 control-label">Date</span>
which makes it look different on the page.
But when I use text instead of resource:
<asp:Label ID="date" runat="server" Text="Date" CssClass="col-sm-4 control-label" />
this renders correctly:
<label for="ctl00_MainContent_FormDate_Date" class="col-xs-4 control-label">Date</label>
Anyone come a cross this issue and how can I fix the issue to render as <label> when using resources?
Though I know you have already got the solution, I am answering for the future reader of the post.
If you set the Label.AssociatedControlID value it becomes a label element.
If it is not associated to a control or in other words not being used as a label element it becomes a span element.
A label which is not associated with a control is considered as a bad mark up. Hence if the label control is not assigned to a control, instead of placing a label .NET places that as a span element.
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'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
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.
The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in the form.
Internet Explorer (IE) highlights the first button in the form when the form has focus by adding a proprietary border or something. Other browsers do not add such a visual clue.
I'd like to use another button as the default and style this button so all browsers will provide a visual clue that it is the default button. (We're using ASP.NET which uses one form per page, and so it's hard to design the pages so that the default button always comes first.)
While I can easily accomplish this with javascript and css in most browsers, I'm having trouble making IE stop highlighting the first button.
Is there any way to tell IE to NOT highlight the first submit-button or to highlight a different button? Or is there some other solution that I've missed?
On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.
ASP.Net 2.0 also introduced the concept of DefaultButton.
This is available on atleast Form and Panel elements:
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
<br />
<br />
<asp:panel id="something" defaultbutton="button3" runat="server">
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
<br />
<asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />
</asp:panel>
<br />
<br />
</div>
</form>
So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.
This is powered by an onkeypress method created by ASP.Net.
When the page loads, IE and Firefox both highlight Button2 (as you want).
If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.
Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.
This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>
But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).
Other than replacing them with image buttons, I'm not sure what else I can suggest.
One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.
Feels dirty though. Any better ideas?
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you are using .Net 2 this may help you
...Use the DefaultFocus property to
access the control on the form to
display as the control with input
focus when the HtmlForm control is
loaded. Controls that can be selected
are displayed with a visual cue
indicating that they have the focus.
For example, a TextBox control with
focus is displayed with the insertion
point positioned inside of it. ...
What about defining a particular CSS style (or class) for this button ?
<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>