I'm trying to have one unified location where I may edit how my gridview columns will act and align. Specifically looking at the headerrow. I have certain columns containing text values, those should be left aligned values and headers. Other columns contain integers and should be right aligned both values and headers.
"On the first day" I thought all was good and well, Firefox/Chrome showed it precisely as desired, then the users came and saw everything was wrong (in their Explorers) (center aligned headers).
Hence I spent countless hours "and sleepness nights;)" googling away trying to find the solution to no avail.
How can I uniquely identify one header cell to be left aligned and another header cell to be right aligned?
I found the HeaderStyle-CssClass and ItemStyle-CssClass (latter is not that interesting in this specific case).
Problem is whenever I define the alignment in the CSS file
.HeaderStyle th { text-align: <value>; }
It supercedes any other setting there may be. Remember text items should be left, digits right aligned, incl header.
It would be no problem persay to incl a HeaderStyle-CssClass in the troubled areas,
though that would be rather bothersome to both support and maintain later.
The correct solution would be a single location that would define the alignments, as they should respectively as per design.
Could this be done with a skin in the themes folder?
For demonstration purposes
<%# Page Language="C#" AutoEventWireup="true" CodeFile="GridviewAlignments.aspx.cs"
Inherits="GridviewAlignments" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Testing GridView Alignment</title>
<style type="text/css">
.LeftAlign
{
text-align: Left;
}
.NoneAlign
{
text-align: none;
}
.RightAlign
{
text-align: Right;
}
.JustifyAlign
{
text-align: justify;
}
.InheritAlign
{
text-align: inherit;
}
.HeaderStyle th
{
text-align: justify;
}
</style>
</head>
<body>
<form runat="server">
<asp:GridView runat="server" ID="TestAlign" ShowFooter="True" DataSourceID="testDataSource"
Width="600" CssClass="HeaderStyle">
<Columns>
<asp:BoundField DataField="left" HeaderText="-left-"
HeaderStyle-CssClass="LeftAlign" />
<asp:BoundField DataField="none" HeaderText="-none-"
HeaderStyle-CssClass="InheritAlign" />
<asp:BoundField DataField="right" HeaderText="-right"
HeaderStyle-CssClass="RightAlign" />
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="testDataSource" runat="server" TypeName="TestData" SelectMethod="GetTestGridData"></asp:ObjectDataSource>
</form>
</body>
</html>
Rather than using a specific CSS class tied to <th> to provide the default style for your header, you should use the HeaderStyle-CssClass property of the GridView.
.HeaderStyle {
text-align: justify
}
<asp:GridView runat="server" ID="TestAlign" ShowFooter="True"
DataSourceID="testDataSource" Width="600"
HeaderStyle-CssClass="HeaderStyle">
<Columns>
<asp:BoundField DataField="left" HeaderText="-left-"
HeaderStyle-CssClass="LeftAlign" />
<asp:BoundField DataField="none" HeaderText="-none-"
HeaderStyle-CssClass="InheritAlign" />
<asp:BoundField DataField="right" HeaderText="-right"
HeaderStyle-CssClass="RightAlign" />
</Columns>
</asp:GridView>
whenever I define the alignment in the CSS file
.HeaderStyle th { text-align: <value>; }
It supercedes any other setting there may be.
That's because the selector .HeaderStyle th is more ‘specific’ than just .RightAlign. In CSS the more stuff you put in the selector, the more ‘specific’ it is, and more-specific rules override less-specific ones. You can see the exact rules in the spec.
If you change the .RightAlign selector to .HeaderStyle .RightAlign, it is now more specific than .HeaderStyle th and will ‘win’.
Also note inherit doesn't work in IE.
Solution became to do some specific BoundFields eg.
TextField : BoundField,
NumberField : BoundField,
DateField : BoundField
In the constructor I put a this.HeaderStyle.CssClass = "TextBoundField"; (or the CSS item governing this particular Field)
Cos there is also a this.ItemStyle.CssClass = "TextBoundField";
The CSS then have a .TextBoundField { text-align: left; } (for text, right for number and dates).
Works sweet, even for IE. ;)
thx for your assistance.
Have you tried using a HeaderTemplate?
<Columns>
<asp:TemplateField>
<HeaderTemplate></HeaderTemplate>
</asp:TemplateField>
</Columns>
I'm not quite sure about it, but I think that this way you could set diferent classes for different headers.
Go to the columns properties of data grid view
select column you want to change alignment
then change Horizontal Alignment for each column you want to change (left or right)
Related
I am attempting to apply a custom font to the asp gridview that is nested in an iframe. We are using shtml to link pages together. The css was loaded by previous processing, however it was not being recognized forcing me to put a link on my page.
The font-face source items are duplicates of another css definition, so the paths are correct and work on the rest of the site. The background color is recognized, so I know the css is being evaluated. If another font is listed in the font-family, it is recognized and used.
I'm at a loss as to why the custom font that duplicates an existing css is not recognized. I'm focused on the issue relates to the iframe, but am unable to locate a resolution on this issue.
Thanks in advance
iframe statement used to load the asp page
<iframe id="ff" width="546px" height="200px" frameborder="0" scroll="yes" src="Career_JobListings.aspx"></iframe>
ASP code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Career_JobListings.aspx.cs" Inherits="_Default" %>
<form runat="server" id="f1">
<div class="gridview">
<asp:sqldatasource id="jobListingsDS" runat="server"
selectcommand="SELECT JobID, JobName, JobDescription, FileLink FROM tblJobListings"
connectionstring="<%$ ConnectionStrings:dbConnectionString %>">
</asp:sqldatasource>
<h2>A listing of current job openings.</h2>
<asp:gridview id="grdJobListings" runat="server" autogeneratecolumns="false"
datasourceid="jobListingsDS"
onrowdatabound="jobListingsGridView_RowDataBound"
cssclass="gridview">
<Columns>
<asp:BoundField ItemStyle-Width="150px" ReadOnly="True" DataField="JobName" HeaderText="Job Name" SortExpression="JobName"/>
<asp:BoundField ItemStyle-Width="250px" DataField="JobDescription" HeaderText="Description" />
<asp:HyperLinkField HeaderText="Detailed Description" Text='Click for detailed description.' NavigateUrl='f<%# bind("FileLink")%>' Target="_blank" runat="server"/>
</Columns>
</asp:gridview>
</div>
</form>
CSS Information:
#font-face {
font-family: MuseoSlab;
src: url(fonts\Museo_Slab_900.otf);
src: url(fonts\Museo_Slab_900.ttf);
src: url(fonts\Museo_Slab_900.eot);
}
/* ASP usage */
.gridview {
font-family: MuseoSlab;
}
.gridview tr {
font-family: MuseoSlab;
background-color: #FF6600;
}
I had utilized a previous css and created a new one with the essential font and class items for my grid. It turns out that the resolution was a missing import.
The following was added to the top of the css and now the custom font is being applied.
#import url("framework.css");
Hope this helps others that encounter this issue.
i want to ask how i can apply style on asp tags by using stylesheet???
For example i want to style a asp button control like following
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px"
BackColor="#3399FF" />
i know i can style it by using its properties but i want that if i have 10 buttons in my page then same style is apply to all buttons automatically and i have to do it for my all pages buttons and labels controls and i cannot set properties for all separately
is there is a solution by using stylesheet and if not by using stylesheet then what should i do that the style apply to all button controls and textbox,labels controls also
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here"></asp:Label>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
please guide me how i can solve this issue
Thanx :)
Add the CssClass property to the Button control, for example, and add a corresponding class to the CSS file.
aspx
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px" BackColor="#3399FF" CssClass="my-buttons" />
CSS
.my-buttons { background-color:#3399FF; }
well you could set default css for each element, this would automatically cause every control of this type to take on this css:
input[type=text] {
//styling
color:blue;
}
label {
//styling
color:blue;
}
or you could come up with your own css class and just attach it to the elements you want:
.myTextClass
{
//styling
color:blue;
}
.myLabelClass
{
//styling
color:blue;
}
then attach the class using the CssClass property:
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here" CssClass="myLabelClass"></asp:Label>
<asp:TextBox ID="txtuser" runat="server" CssClass="myTextClass"></asp:TextBox>
You can register default skin for server controls with desired properties responsible for styling.
Look at this article: How to: Apply ASP.NET Themes
If the page theme does not include a control skin that matches the SkinID property, the control uses the default skin for that control type.
I can not set the width of bound field. Is there any problem in the following markup.
<asp:BoundField DataField="UserName" HeaderText="User Name"
meta:resourcekey="BoundFieldUNCUserNameResource1">
<HeaderStyle Width="50%" />
</asp:BoundField>
Please refer to the image. I set width using the following. The yellow colored numbers are corresponding width. The marked user name is always Wrapped even I set a width to a large value (say 50%) and set Wrap="false".
<HeaderStyle Width="20%" Wrap="true" />
<ItemStyle Width="20%" Wrap="true" />
Try This:
ItemStyle-Width="50%" ItemStyle-Wrap="false" in the BoundField tag
For BoundField:
<asp:BoundField DataField="UserName" HeaderText="User Name" ItemStyle-Width="50px" />
It's amazing that even now, in 2016, the ItemStyle-Width and HeaderStyle-Width attributes usually get ignored in the ASP.Net GridView control.
Sometimes, they just seem to create no markup whatsoever.
My solution was to give up trying to set this attributes, and I resorted to using plain old CSS instead:
.AspNet-GridView table tbody tr td:nth-child(1)
{
/* Set the width of the 1st GridView column */
width: 200px;
}
.AspNet-GridView table tbody tr td:nth-child(2)
{
/* Set the width of the 2nd GridView column */
width: 300px;
}
I am also facing this problem today. What i got is you must define ur width in css class & called that css class in boundfeild.
e.g.
HeaderStyle-CssClass="width350"
To change column width gridview boundfield just add this inside boundfield
ItemStyle-Width="200" ItemStyle-Wrap="False"
it worked for me, try this
After trying several solutions with no luck, I was able to add a css class to the item. Seems like both HeaderStyle-CssClass and ItemStyle-CssClass attributes needed to be set:
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="Name" ItemStyle-CssClass="Name" />
I have an asp.net checkboxlist as follows:
<asp:CheckBoxList ID="CheckBoxList_Genres" runat="server" RepeatColumns="3">
<asp:ListItem Selected="True">Action</asp:ListItem>
<asp:ListItem Selected="True">Comedy</asp:ListItem>
<asp:ListItem Selected="True">Classics</asp:ListItem>
<asp:ListItem Selected="True">Documentary</asp:ListItem>
[...]
I have two problems: the text does not align with each checkbox, and in some browsers (notably Safari), there is no padding between the checkbox and the text (the text rides up against the checkbox). I am aware of the answer posted here:
How to align checkboxes and their labels consistently cross-browsers
However, I can't work out how to implement these styles in the asp:checkboxlist context; I know that a css style can be set for the checkboxlist, but do not think that this allows me to set separate styles for the "label" and the "checkbox". Help would be appreciated.
You should be able to apply the same methods to the CssClass property of your CheckBoxList control as you would a regular checkbox.
Here is some CSS code I used to indent long text next to an ASP.net check box list:
.chkChoice input
{
margin-left: -20px;
}
.chkChoice td
{
padding-left: 20px;
}
ASP.net:
<asp:CheckBoxList id="ChkWork" runat="server" TabIndex="2" CssClass="chkChoice">
In the properties of the check box list, switch the repeatlayout from flow to table. That will align the columns.
some of checkboxlist items, has label, for space between text and the item, for example checkbox, you have to give type of item in Css.
Exlampel:
.myCheckBoxList label
{
padding-right: 5px;
}
and give che checkboxlist class like this:
CssClass="myCheckBoxList"
One of the properties of asp:CheckBoxList is RepeatLayout="Table". This will result to a table-like list where all is checkboxes are aligned.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" Width="100%">
Output:
I have the following div in a page, but the button is being rendered below the input, despite there being plenty of room for them both in the same 'row' as I want them. How can I force this 'same row' issue?
<div id="pageHeader" style="text-align: right;">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
</div>
NEW: This issue was due to the fact that I'm using telerik ajax here, and had included searchInput as an updated control in the ajax settings of my RadAjaxManager. This control 'wraps' all of its updated controls in block displayed divs by default. I just had to override this default as follows:
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
By default, input elements render with display:inline, which makes them appear in line :) However, in your case it seems that something is breaking the default behavior, so you will need to explicitly specify that you want display:inline instead of display:block. So, to sum up:
You can use the following CSS to obtain the desired view:
#pageHeader input
{
display:inline !important;
}
Thank you so much for the code. It worked great. Telerik Ajaxmanager was the problem.
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
You can also change your existing div to be an asp:Panel that gets updated by the RadAjaxManager (rather than the individual control(s)):
<asp:Panel id="pageHeader" runat="server" CssClass="righty">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
This may result in an additional control being posted back - and so is slightly worse performance-wise - but I think it improves readability somewhat.