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.
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'm using a lot of LinkButtons in my web application with text and images inside them.
All LinkButtons are set with a ToolTip and all images inside the LinkButtons are set with an alternate text.
<asp:LinkButton CssClass="button button-input" ID="btnSearch" runat="server" CausesValidation="False" ToolTip="Search">
<img id="imgSearch" runat="server" src="../../../images/icons/magnifier-left.png" alt="search-something" width="12" height="12" />
</asp:LinkButton>
The problem is that in Internet Explorer the alternate text of the image is shown instead of the ToolTip of the LinkButton. In Firefox this problem doesn't exists, it always show the ToolTip of the LinkButton.
This is the produced XHTML:
<img width="12" height="12" alt="search-something" id="..." src="../../images/icons/magnifier-left.png">
Is it possible to overcome this issue?
Removing all alternate texts will resolve the issue but a better (more standard) way is always welcome!
Try to set a empty title attribute on your image.
Or use <asp:ImageButton /> instead of the <asp:LinkButton />
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 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.
The question is pretty straightforward. I have an <asp:Image> which lives in an <asp:Panel>. My goal is to provide a very basic "print preview" where either left, center, or right alignment is selected. The panel represents the full print area (a sheet of 8.5" x 11" paper) and the image inside is the area that will actually get printed. The full code is this:
<asp:Panel ID="Panel2" runat="server"
BackColor="Black"
BorderStyle="Inset"
Width="425px"
Height="550px" >
<asp:Image runat="server" Height="425px" ImageAlign="" />
</asp:Panel>
I set the ImageUrl property in the code behind, no problems there. If I want to align the image all the way to the left or right, I can just specify ImageAlign="[Left|Right]". However, I haven't been able to find a way to center the image in the panel. I've tried all the different ImageAlign values and none of them seem to do what I want. Am I SOL here? If I have to, I can alter the CSS class for the image or panel but I couldn't figure out anything successful with that approach either.
what if you use panel HorizontalAlign="Center" property.......
<asp:Panel runat="server" ID="Panel2" HorizontalAlign="Center">
</asp:Panel>
in your panel tag (which becomes a div client side) just add this attribute:
CssStyle="text-align:center;"
Though that would center EVERYTHING within that panel.
Perhaps just set the CssStyle of the image to a hardcoded left-margin? If your goal is a fixed width print preview, this should be ok.
Panel CSS Property:
CssStyle="alignCenter"
CSS:
.alignCenter
{
margin: 0 auto;
}
you can either use inline style sheet or external style sheet to accomplish this and add your css code in it