I have a asp.net grid view,and i want this gridview show center of the div,i write this css and html code:
<div style="color: #FFFFFF;" class='center' >
شرکت هایی که درمعاونت تجاری ثبت نشده اند<br />
<br />
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
</div>
and center css is:
.center {
width:800px;
border-radius: 5px;
width: 60%;
height:200px;
margin: 0 auto;
}
but gridview show this:
how can i solve that?thanks.
Add align="center" in
Like this
<div align="center" style="color: #FFFFFF;" class='center' >
And remove extra style from .center class. You have assigned width 2 time. % and px.
Related
My current code renders like Picture 1, how can I get the output to render like Picture 2?
I tried to search the web but most of the results I have found show how to do this in css
Pic one,
Pic two,
<ext:Container id="Container1" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 10 0" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Region="East" Height="180" Width="700" Split="true">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Region="East" Height="180" Width="428" Split="true">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 0 0">
<Items>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Region="East" Height="265" Width="700" Split="true">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container1" runat="server" Height="700" marginSpec="0 0 0 0" Layout="VBoxLayout" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Height="180" Width="700" Layout="VBoxLayout">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" Height="200">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Height="248" Width="700" Layout="VBoxLayout">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" Height="700">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" marginSpec="0 0 0 700" Layout="VBoxLayout" Height="700" Width="430">
<Items>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Height="425" Width="433" Layout="VBoxLayout">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" Height="700" Width="430" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
Did some editing. Found out that need to add in the layout for the panel and the container.
whats the problem with CSS?
do something like this :
.right {
position: absolute;
right: 0px;
}
and then :
<div class="right">
// your html
</div>
instead of creating a .css I would recommend you to use preexisting css like twitter bootstrap css or even a frontend framework which they have function and features that works very well.
With Bootstrap it comes a Grid System where you can place your elements like you want.
this is my html code
<div style="border-style: solid; border-width: thin; height: 809px; width : 50%; float: left; font-size: medium; text-align: center; font-weight: bold;">
Job member<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
PageSize="20" Width="50%">
<Columns>
<asp:CheckBoxField>
<ItemStyle Width="10px" />
</asp:CheckBoxField>
<asp:BoundField HeaderText="User" DataField="user_id" />
<asp:ButtonField HeaderText="View" Text="Button" />
</Columns>
<HeaderStyle Height="20px" />
<RowStyle Width="20px" />
</asp:GridView>
</div>
<div style="border-style: solid; border-width: thin; height: 809px; width : 50%">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
PageSize="20" Width="50%">
<Columns>
<asp:CheckBoxField>
<ItemStyle Width="10px" />
</asp:CheckBoxField>
<asp:BoundField HeaderText="User" DataField="user_id" />
<asp:ButtonField HeaderText="View" Text="Button" />
</Columns>
<HeaderStyle Height="20px" />
<RowStyle Width="20px" />
</asp:GridView>
</div>
</div>
i create 2 div tag within the div tag, and i set the width into 50% so the div tag can appear nicely in the browser, when i deploy to the browser, the appearance is totally loss... i have consider the border thickness issue, the second div tag might pull down because there is some width on the border, so i changed the width into 47% before, in the end the result is still same, may i ask if my way to create this kind of div tag is it correct?
this is how my visual developer looks like
this is how my browser looks like
please help
I have a CssClass that I want to set to the StaticMenuItemStyle-CssClass attribute. In the design view the menu has all of the style attributes. But when I run it, none of the attributes are displaying. The background is white and text is blue.
This is the CssClass:
.StaticMenuStyle
{
font-family:Times New Roman;
color: White;
background-color: #006a54;
border: thin outset #A9A9A9;
font-weight: bold;
font-size: medium;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 20px;
}
This is the menu that I want to attribute to the CssClass:
<table class="style1" cellpadding="0px" align="left">
<tr valign="top">
<td id="cell_menu" valign="top">
<asp:Panel ID="pnlMenu" runat="server" CssClass="panelMenu" ScrollBars="None" >
<asp:Menu ID="MainMenu" runat="server" StaticMenuItemStyle-CssClass="StaticMenuStyle">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Create Message"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Edit Profile"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Edit Group"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Message Report"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Admin"/>
</Items>
</asp:Menu>
</asp:Panel>
</td>
<td id="cell_content" class="panelContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</td>
</tr>
</table>
Please ignore the multiple About.aspx pages they are placeholders.
If I add all of the individual style elements to the it displays fine. But I would rather put them all in a CssClass.
I also tried using
but that does not work either.
What am I doing wrong?
Thanks,
OK. Now, it is picking up the CssClass and displaying the correct style. I guess I just needed to clean out the cache.
I have a gridview which headers I want to align to the left.
It works in chrome, but in IE 9 they are not aligned to the left.
(I paste the entire code, in case some surrounded div is responsible of this behavior.)
<div style="height: 300px; overflow: auto">
<asp:GridView ID="myGrid"
AutoGenerateColumns="true"
runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left"/>
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<So![enter image description here][1]rtedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</div>
<div style="margin-top: 20px; margin-left: 550px">
<asp:Button ID="btnClose" runat="server" Text="Close" />
</div>
<div>
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</div>
Update1: CSS
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child{
background-color:#eb8c00 !important;
color:#FFF !important;
}
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child td{
text-align:left;
}
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr{
color:#404041 !important;
}
This works. Add a 'CssClass' to your HeaderStyle:
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" CssClass="headerClass" />
And then declare the following style:
/*Give a text-align left only to the gridview header th's*/
.headerClass > th
{
text-align:left;
}
To explain a little further, what will happen is HeaderStyle.CssClass will give a class to the <tr> containing your header. The CSS selector .headerClass > th applies its style then to all children <th> of your header, therefore applying the left text align to each header cell.
Cant you just put
table th {text-align:left;}
In your CSS?
Or am I missing something?
You cannot align left on a tr.
td or th however, will work.
In any case I would suggest doing this with a css class or with the th in your css file.
.myLeftAlign {
text-align: left;
}
or
th {
text-align: left;
}
If you do not want to use css, put the Align attribute on your th in stead of your tr
I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK