I'm running into a formatting problem that only occurs with IE10 and Win2008 with IIS7.5. Using the IE10 compatibility modes via the developers toolbar, IE7,8,9,10 all work with Win2003 and IIS6. It also works with IE7,8,9 and Win2008 with IIS7.5. However, with IE10 and IIS7.5, the very same code formats the textboxes differently. (IE10 compatibility mode works correctly)
There are two main problems - a comment text box is not displaying at the proper width (it displays at default width). Here is the code (all the JS is working properly):
<asp:TextBox runat="server" Height="50px" ID="JustificationTxt" TextMode="MultiLine"
onkeyup="AutoExpandTextbox(this)" onfocus="OnFocusJustificationComments(this)"
onblur="OnBlurJustificationComments(this)" Columns="50" Rows="10" Width="98%"
Text="<%# VM.commentText %>" />
Also, some readonly text boxes are not rendering in the proper color (however the readonly attribute is working):
<asp:TextBox BackColor="#eeeeee" ReadOnly="True" ID="ACWPcumTxt" runat="server" Text="<%# VM.ETCGridRow.ACWPcumDisplay%>" />
Remember that all of this works in the other configurations.
What am I missing?
Related
I have a RadGrid with attribute RenderMode set to Mobile.
It works just fine and you can scroll vertically fine if I add "rough" data into the ItemTemplate e.g.
<ItemTemplate>
<%# Eval("SomeData") %>
</ItemTemplate>
However, if I add some extra tags around the data e.g.
<ItemTemplate>
<div class="text-center">
<%# Eval("SomeData") %>
</div>
</ItemTemplate>
I can't scroll the data any longer as it behaves like I am dragging the whole control.
It also works fine if you use GridBoundColumn instead meaning, only when you add containers into the template column it stops scrolling on mobile devices. On desktops still works perfectly fine. Thank you
NOTE: I've checked and this question is not already answered. Thx
To further iterate on my comment, this is how I've dealt with templatecolumns and it's been very successful.
<telerik:GridTemplateColumn HeaderText="ID" AllowFiltering="True" runat="server" HeaderStyle-Width="2%"
HeaderButtonType="TextButton" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="True" ShowFilterIcon="False"
FilterControlWidth="100%" UniqueName="IDX_Actual" DataField="IDX_Actual" SortExpression="IDX_Actual"
GroupByExpression="IDX ID Group By ID">
<ItemTemplate>
<telerik:RadLabel ID="RlblIDX" runat="server" Text='<%# Bind("IDX_Actual") %>' UniqueName="RlblIDX" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
The label will then use the ItemStyle to align the text to the center of it's assigned width.
It's also inside a telerik-control, which by itself gives you further functionality that might (or might not) be nice to have later on.
Furthermore you would be able to set any specific styling-choices with the radlabel's CSSclass
Happy coding! :)
above is the attached image of checkbox rendering in internet explorer 8.
the code used is <asp:CheckBox runat="server" ID="selectCheckBox" />
while it renders perfectly in Firefox and in chrome the checkbox cannot be checked, any help would be better solving this rendering problem in different browsers.
thanks.
You did not define Text of checkbox.
<asp:CheckBox ID="selectCheckBox" runat="server" Text="Label" Checked="False" OnCheckedChanged="selectCheckBoxChanged" />
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.
I have the following problem with Opera.
The following asp.net code
<asp:Image runat="server" ID="imgExpand"/>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
ImageControlID="imgExpand"
ExpandedImage="<%$ Image:collapse.png %>"
CollapsedImage="<%$ Image:expand.png %>"
/>
generates the following in FF3, IE6, IE7, IE8:
<img style="border-width: 0px;" src="/style/img/collapse.png" id="ctl00_ContentPlaceHolder1_imgExpand" title="Ausblenden..."/>
however the following in Opera 10:
<img id="ctl00_ContentPlaceHolder1_ucProductList_rptProducts_ctl02_imgExpand" class="expand-img" src="" style="border-width:0px;"/>
As you can see the src="" is empty and thus no image is beeing displayed.
Do you know any solution to this problem?
Thanks alot
Sounds pretty weird. I haven't heard of that particular error, but you could probably work around it the same way you can avoid all the problems associated with ASP.NET's idiotic, broken browser-sniffing: turn it off.
Discovered the same problem. But noticed that official example is working under Opera. After some playing found a reason:
It's necessary to specify image for control (ImageUrl="~/Img/icon-plus.gif")
<asp:ImageButton ID="ib" runat="server" ImageUrl="~/Img/icon-plus.gif" ImageAlign="AbsMiddle" />
And after that put the ID of it into control (ImageControlID="ib"):
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pD" ExpandControlID="pH" CollapseControlID="pH"
Collapsed="True" TextLabelID="lCategoryName" ImageControlID="ib" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
SuppressPostBack="true" ExpandedImage="~/Img/icon-minus.gif" CollapsedImage="~/Img/icon-plus.gif" />
I have a GridView control (which renders to table, tr, td) with some BoundFields and TemplateFields. Essentially, I am displaying two columns, Application Name and Notes (as a TextBox), and I want 35%, 65% relative widths. Here is my asp.net markup:
<asp:GridView ID="gridRequestedApps" DataSourceID="llbRequestedApplications" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ComputerID, RequestID"
EnableViewState="False"
cssclass="xGridview">
<Columns>
<asp:BoundField DataField="ComputerID" HeaderText="ID" SortExpression="ComputerID" Visible="False" />
<asp:BoundField DataField="RequestID" HeaderText="ID" SortExpression="RequestID" Visible="False" />
<asp:TemplateField HeaderText="Application Name" ItemStyle-Width="35%" ItemStyle-Wrap="false">
<ItemTemplate><asp:TextBox ID="ApplicationName" runat="server" Text='<%# Bind("ApplicationName") %>' CssClass="input_text"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes" ItemStyle-Width="65%">
<ItemTemplate>
<div style="width:100%; overflow:hidden">
<asp:TextBox ID="UserNotes" runat="server" Text='<%# Bind("UserNotes") %>' CssClass="input_text" style="overflow:hidden"></asp:TextBox>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now at one point (with slightly different html than shown above), I did have the 35/65 relative widths working. However, I then noticed that if I put long text into the textbox, it was growing horizontally stretching its containing table past 100% width. (This is in IE7....in Firefox, the overflow:hidden seemed to be working).
So, I started messing with the CSS to try to fix the bug in IE, but now, not only does it still overflow, but my column widths are no longer respecting the 36/65 settings.
Before jQuery, try this first. I found it by googling "ie overflow:hidden table cell".
How to prevent HTML tables from becoming too wide
Using Javascript for styles usually isn't a good idea, especially if later on in the product's life another developer comes along and wants to, say, add a column. Agreed, sometimes hacking a solution together feels nicer in the short term, but it can only lead to headaches in the future.
just solved myself this problem, and I fell just...
Change document type definition to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
but care that other parts of the page don't start jumping around.