1My gridview code is like:
<asp:GridView runat="server"
ID="gvOpenProblems"
AutoGenerateColumns="true"
BorderColor="Black"
OnRowCreated="gvOpenProblems_RowCreated"
OnRowDataBound="gvOpenProblems_RowDataBound"
HeaderStyle-HorizontalAlign="Center"
Width="2000px"
AllowPaging="true"
PageSize="20"
OnPageIndexChanging="gvOpenProblems_PageIndexChanging">
<RowStyle HorizontalAlign="Left" />
<PagerStyle CssClass="gridpager"
HorizontalAlign="Left"
Width="200px" />
And CSS is like:
.gridpager, .gridpager td {
text-align: left;
color: Green;
font-weight: bold;
text-decoration: none;
border: 0;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.gridpager a {
color: Red;
font-weight: normal;
}
This works fine normally but when the number of pages is more than 10, and when I click on 10th page or 11th page all page numbers spread and go out of grid.
Is this a normal issue or is it an issue with the CSS?
The problem is that you're setting the width to 200px. You'd be forgiven for thinking that this applies to the containing table that the paging controls are held in, but it's not, it's the TD that the a & span tags are contained in.
Related
I have two options for the user on my page, one is a button that performs an edit function and the other is a hyperlink that navigates to another page. Both are styled to look the same but because the delete option is a hyperlink control it only works when you click on the text and not the surrounding box like the button does.
The .aspx file is as follows:
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit"/>
<div class ="deletebutton">
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
</div>
And the CSS is:
.deletebutton, input[type="submit"]
{
align-items: flex-start;
text-align: center;
cursor: default;
color:#BD193A;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
width: 200px;
font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
float: left;
margin:5px;
}
Simply remove DIV from hyperlink and set deletebutton class to hyperlink
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
In that case I think you can use the hyperlink outside the DIV element, like:
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
<div class="deletebutton">
Delete
</div>
</asp:HyperLink>
Depending on your CSS you can have changes to do...
or like the edited version that I've mentioned in comments:
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
Delete
</asp:HyperLink>
This is my grid view
<div class="gridView">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MembershipID"
CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" AllowSorting="True"
OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="5">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
THe result of that code is the grid view shows 5 rows and the paging is under the fifth row.
my problem
the pager is not shows so I have to scroll to show it.
my quesiton
how can I make the pager shows without using scroll?
Edit
this is the css
.gridView
{
max-height: 280px;
overflow: auto;
}
.gridView th
{
font-size: 12px;
font-weight: bold;
height: 25px;
white-space: nowrap;
}
The max-height and overflow in the "gridview" class is causing the scroll-bar to appear.
Remove those properties.
I have pull down menu which is working fine in IE8 without any issues but not working in IE 10. Not even able to click the menu in IE10. Also I checked in IE 10 compatibility mode, but still not working. Below is the code I have written and loading the menu items dynamically.
<div class="clear hideSkiplink" style="background-image: url(Images/horizBar1.jpg);padding-top: 10px">
<asp:Menu ID="menuMain" runat="server" StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal"
OnMenuItemClick="menuMain_MenuItemClick" BackColor="#FFFFFF"
BorderColor="#296573" Font-Bold="True" Font-Names="Verdana"
Font-Size="Medium" ForeColor="#296573">
<StaticMenuItemStyle CssClass="menuItem"></StaticMenuItemStyle>
<DynamicMenuItemStyle CssClass="menuItem"></DynamicMenuItemStyle>
</asp:Menu>
</div>
style:
.menuItem {
border: groove 1px black;
width: 150px;
padding: 2px;
padding-left: 20px;
background-color: Transparent;
font-family: verdana;
font-size: 12px;
font-weight: bold;
}
I have a checkbox with long text (about 5 or 6 lines). I'm trying to get the text indented and nicely aligned when it is wrapped. My current code works currently in IE but in Chrome, Safari, FireFox, the text is on a different line than the checkbox is. Does anyone know what I can be doing wrong here or have any other ways to accomplish this? Thanks for any help in advance!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Info.ascx.cs"
Inherits="Project.Info" %>
<style type="text/css">
.CkbxFormat input
{
float: left;
}
.CkbxFormat label
{
display: inline-block;
}
</style>
<div style="margin-top: 10px; margin-left: 50px;">
<asp:Table ID="Table1" runat="server" Width="700px" CellSpacing="2" CellPadding="5"
Style="border: Solid 1px green;">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="Information"></asp:Label>
</asp:TableCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID="CkBxInfo" runat="server" Text="The accessor of a property contains the executable statements associated with getting (reading or computing) or setting (writing) the property. The accessor declarations can contain a get accessor, a set accessor, or both. The body of the get accessor is similar to that of a method. It must return a value of the property type. The execution of the get accessor is equivalent to reading the value of the field. " CssClass="CkbxFormat"></asp:CheckBox>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>
Try this for the CSS:
.CkbxFormat label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.CkbxFormat input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
I think that will get you very close to what you want.
i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,
.mGrid {
width: 100%;
background-color: #fff;
margin: 0px 0 0px 0;
border: 0px #525252;
}
.mGrid table
{
border:0px;
}
.mGrid td {
padding: 2px;
border-width: 0px ;
background-color:#3A3F3E;
color: #fff;
text-align:left;
}
td#Mname {
text-align:left;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background-color:#3A3F3E;
border-width: 0px ;
font-size: 0.9em;
text-align:center;
}
<asp:GridView Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
<Columns>
<asp:BoundField DataField="mentor_id" HeaderText="Image" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mentor Name">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
hopes for your suggestions thanks in advance
use td+td it will be applied to the Second td of the grid.
.mGrid td+td {
text-align:left !important;
}
.mGrid td+td+td {
text-align:left !important;
}
Here is a good post on this.
Styling the last td in a table with css