Having an issue trying to figure out why this is affecting the AJAX control the way it is.
When I remove the CSS file it displays correctly.
CSS File
.tdMain
{
width:452px;
font-family:Arial;
font:bold,small;
}
.tdInput
{
width:324px;
font-family:Arial;
}
.center
{
margin-left:auto;
margin-right:auto;
width:50%;
}
table
{
border-collapse: separate;
border-spacing: 0;
border: 0;
width:752px;
}
ASPX
<tr>
<td class="tdMain">Date:</td>
<td>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:ImageButton ID="imgPopupDate" ImageUrl="~/Images/calendar.png" ImageAlign="Bottom" runat="server" />
<ajaxToolkit:CalendarExtender ID="cDate" PopupButtonID="imgPopupDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy"/>
</td>
</tr>
The CalendarExtender generates a table. You are setting all tables on your page to a width of 752px including the one generated by the CalendarExtender.
table
{
...
width:752px;
}
you need to be more specific with your css selectors. Give the table that you wish to have a set width a class or id and use that as a selector.
table.myTable
{
...
width:752px;
}
or
table#myTable
{
...
width:752px;
}
Related
I'm new to CSS and I'm trying to accomplish the following on IE10:
I have the asp datagrid with the css class "maintbl"
<asp:DataGrid CssClass="maintbl" ID="dg" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn ReadOnly="true" DataField="UpdateOn" DataFormatString="{0:MMMM d, yyyy}" HeaderText="Date Modified" SortExpression="UpdateOn" ></asp:BoundColumn>
<asp:BoundColumn DataField="Message" HeaderText="Message" SortExpression="Message"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
The html generated is similar this:
<table class="maintbl">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I'm trying to apply css specifically to the first tr. I've tried this in css file but it's not working.
.maintbl table tbody tr:first-child {
border: 1px solid white;
background-color: #167F92;
color: white;
padding: 1em;
text-align: center;
}
Please help me with what I'm doing wrong.
Try changing your css selector to be something like
table.maintbl tbody tr:first-child
In your original selector, it was looking for the .maintbl element, then a child table element, then tbody, then tr. Now it is looking for a table element with the .maintbl class (and then looking for child elements from there).
I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>
I am not able to display listbox on mouse hover on textbox as below
<table id="Search">
<tr>
<td>
<asp:TextBox runat="server" ID="topics" CssClass="TT"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="LstBox" CssClass="LB" runat="server" >
<asp:ListItem Text="Mahesh" Value="1"></asp:ListItem>
<asp:ListItem Text="Mahendra" Value="2"></asp:ListItem>
<asp:ListItem Text="Kirti" Value="3"></asp:ListItem>
</asp:ListBox>
</td>
</tr>
</table>
CSS
td .LB
{
display:none;
position:relative;
}
td TT:hover .LB
{
display:block;
position:absolute;
}
How to display listbox on mouse hover on textbox?.
You can do it like this.
HTML
<table id="Search">
<tr>
<td>
<asp:TextBox runat="server" ID="topics" CssClass="TT"></asp:TextBox>
<asp:ListBox ID="LstBox" CssClass="LB" runat="server" >
<asp:ListItem Text="Mahesh" Value="1"></asp:ListItem>
<asp:ListItem Text="Mahendra" Value="2"></asp:ListItem>
<asp:ListItem Text="Kirti" Value="3"></asp:ListItem>
</asp:ListBox>
</td>
</tr>
</table>
CSS
table tr td{
position:relative;
}
.TT{
/*It's optional to provide it these three property.*/
position:absolute;
left:0; /*Change values according to your adjustments*/
top:0; /*Change values according to your adjustments*/
}
.LB{
position:absolute;
left:0; /*Change values according to your adjustments*/
top:0; /*Change values according to your adjustments*/
display:none;
}
/*If you want to keep it visible, better use on :focus Pseudo class*/
table td:focus .LB,table td:hover .LB
{
display:block;
}
OR better option
JQUERY
/This will work directly with your textbox. Don't forget to add jQuery latest version./
<script>
$(document).ready(function () {
$(".TT").hover(
function () {
$('.LB').css('display','block');
}, function () {
$('.LB').css('display', 'none');
}
);
});
</script>
try this
td .TT:hover .LB
{
display:block;
position:absolute;
}
References: Use :hover to modify the css of another class?
Why are my images overlapping my words? Below is the CSS of 5 different images and 1 table.
#memberreporthistoryimage1 {
position:absolute;
left:20%;
}
#memberreporthistoryimage2 {
position:absolute;
left:40%;
}
#memberreporthistoryimage3 {
position:absolute;
left:60%;
}
#memberreporthistoryimage4 {
position:absolute;
left:30%;
margin-top:20%;
}
#memberreporthistoryimage5 {
position:absolute;
left:50%;
margin-top:20%;
}
#memberreporthistorytable2 {
position:absolute;
width:100%;
}
as you can see i used my position as absolute. Therefore if i have not mistaken, the position of my second table should be going according to my image width and height since the memberreporthistorytable2 is below my images. Unfortunately, it doesn't. As you can see from the image below, it overlaps as soon as i click some data.
This is the layout when no data is being clicked
Here is the image where it overlap.
I tried adding the margin-top which obviously will extend the distance of the table from the images. However, i'm trying to make it look dynamic. Which means, the table 2 will change accordingly automatically when i clicked a data.
#memberreporthistorytable2 {
position:absolute;
width:100%;
margin-top:30%;
}
Under my source code
<tr>
<td id="memberreporthistoryimage1">
<asp:Image ID="Image1" runat="server" />
</td>
<td id="memberreporthistoryimage2">
<asp:Image ID="Image2" runat="server" />
</td>
<td id="memberreporthistoryimage3">
<asp:Image ID="Image3" runat="server" />
</td>
<td id="memberreporthistoryimage4">
<asp:Image ID="Image4" runat="server" />
</td>
<td id="memberreporthistoryimage5">
<asp:Image ID="Image5" runat="server" />
</td>
</tr>
I have placed all my image in a td. All the td are under a tr. So i believe by wrapping my picture 1 by 1 and placing it to the place i want doesn't work as it is what i have been doing.
May i ask where have i done wrong to let it change the position dynamically apart from the position absolute?
Regards.
This happens because you're absolute positioning for images. Better wrap those images inside a div, then place it where you want.
So im using the asp:changePassword which shows the form which allows the user to display the password;
I'm then centering the panel on screen. However I would like to add spacing/cell padding between the rows:
So far I have :
<div style="position:relative;left:300px;top:100px;padding:10px;">
<asp:ChangePassword ID="ChangePassword2" CancelDestinationPageUrl="~/Default.aspx" ContinueDestinationPageUrl="~/Default.aspx" runat="server">
</asp:ChangePassword>
</div>
I've tried:
TextBoxStyle-CssClass & BorderPadding and tried positioning the div inside the changePassword and using 'class' to center it.
i see there is a and then create table and rows etc...
Is there a simpler way to do this? All i want to do is seperate each row in the changePassword Panel by 'cellpadding =5px'
Please advise thank you
EDIT:
<div style="position:relative;left:300px;top:100px;padding:10px;">
<asp:GridView ID="GV" runat="server" CellPadding="0" CellSpacing="0">
<asp:ChangePassword ID="ChangePassword2" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid"
BorderWidth="1px" CancelDestinationPageUrl="~/Default.aspx" ContinueDestinationPageUrl="~/Default.aspx" runat="server">
</asp:ChangePassword>
</asp:GridView>
</div>
I think you need to be using the GridView control. Then in the markup, be sure to set cellpadding and cellspacing to zero and then apply the following CSS...
table { border-collapse: collapse; }
table tr, table td, table th { border: solid 5px #000; margin: 0; padding: 0; }