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.
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! :)
I am new to asp.net. I have a problem with the asp:datagrid.
The grid comes with the Paging Footer PagerStyle always at the bottom of the grid. I would like the PagerStyle to be fixed at the footer of the asp:datagrid.
My Current code
<asp:datagrid id="grdPageTemplate">
<!-- Code to make the columns of my grid-->
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" Position="Bottom" CssClass="footer"></PagerStyle>
I have tried to make a CSS class to do so but it does not work that way. Please help me out.
The CSS class I am using
footer{background-color:#C0C0C0;position:fixed;height:100px;width: 100%;top:100%;margin-top: -100px;}
#vaibhav.pnd kindly post your full asp:datagrid code.
Mean while, For only pager, use the below attributes along with your code.
<asp:datagrid ID="grdPageTemplate" runat="server" Width="100%" ShowFooter="False" AllowPaging="True" PageSize="10">
<!-- Code to make the columns of my grid-->
<PagerSettings Position="Bottom" Mode="NumericFirstLast" />
</asp:datagrid>
Is there a way put an Icon in the colum header instead of text value in the gridview.I am doing this indirect way like this
<ext:Column ID="Column6" runat="server" Text="TS" Flex="1" Align="Center" DataIndex="SId">
<HeaderItems>
<ext:Button Dock="Top" ID="Button6" runat="server" IconAlign="Right" IconCls="flagTs" Scale="Large" Flex="1"></ext:Button>
</HeaderItems>
</ext:Column>
I am using a button which get the style outside in that way I put this image.But It really looks ugly
Is there any way to do that directly and without the messing the looking of the grid.
note the HtmlEncode=false:
<asp:BoundField HtmlEncode="false"
HeaderText='<img src="http://www.gravatar.com/avatar/8c9778a09696aac804ed44f4c8033458?s=32&d=identicon&r=PG" />Filter' />
It will render an image on the header and the word Filter next to it.
<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.