I've got a RadGrid with a fixed height, which is the same that ten rows ones (360px). But in some cases, the texts shown in the rows have to wrap because of the small cell sizes. Then, the master table view grows correctly, but the grid doesn't. The grid border is drawn over the rows, and it does a really anoying visual effect.
I've tried to fix it via CSS, but no luck. I don't know if there is a RadGrid property that may help me; I tried many, but any of them worked.
This is the code I wrote:
<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
<ContentTemplate>
<div>
<telerik:RadGrid ID="MyRadGrid" runat="server" Height="360px" Style="width: auto;">
<MasterTableView Width="100%" PageSize="10">
<Columns>
<!-- ... -->
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ContentTemplate>
</telerik:RadDock>
A pair of screenshots to understand the problem: Before the DataBind() and After the DataBind().
RadGrid height can definitely be tricky. In this case I think you can just remove the Height attribute and it will work as you're expecting.
<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
<ContentTemplate>
<div>
<telerik:RadGrid ID="MyRadGrid" runat="server" Style="width: auto;">
<MasterTableView Width="100%" PageSize="10">
<Columns>
<!-- ... -->
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ContentTemplate>
Related
I have a form which holds multible labels and textboxes.
This form is centered in the page, and each labels are text-aligned to the left. It works as intended on firefox, jsbin, jsfiddle, but not on chrome. What am I doing wrong for it to not work on chrome?
Follows is the asp.net code
<asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False">
<h1>Contact Details</h1>
<asp:Label ID="label001" runat="server" Text="Name (First/Last)<span style='color: red;'>*</span>" CssClass="labels"></asp:Label>
<asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
<br />
<!-- Removed other textboxes for clarity and readability -->
<asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</asp:Panel>
And here is the CSS linked to it:
.labels
{
width: 175px;
text-align: left;
display: inline-block;
}
In Firefox it displays as intended :
And Chrome not displaying as intended :
Even IE8 interprets it properly:
Footnote
I want to add also that on Firefox the labels are 175 pixels wide, while on Chrome they are 125 pixels wide, it doesn't follow the width specified either.
Try adding a div container inside the panel that holds the labels and textboxes:
<asp:Panel ID="PNL_Order" runat="server" Visible="False">
<h1>Contact Details</h1>
<div style="text-align: center;">
<asp:Label ID="label001" runat="server" Text="Name (First/Last)<span style='color: red;'>*</span>" CssClass="labels"></asp:Label>
<asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
<br />
<!-- Removed other textboxes for clarity and readability -->
<asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</div>
</asp:Panel>
I just found out what caused this problem with the comments made from deebs.
It appears that asp:Panel HorizontalAlign="Center" overrides any text-align (in boxes) made afterward.
The solution to that problem is to surround your centered area with a centered div :
<asp:Panel ID="PNL_Order" runat="server" Visible="False">
<div style="text-align:center;">
<!-- Your centered items with text-align=left -->
</div>
</asp:Panel>
This fixed it for Chrome.
I still find this weird to only bug in Chrome, any thought on why it was happening?
I have been playing around a lot with this the past few weeks, but now I am getting desperate. I have a very simple GridView in my default.aspx which display images from a folder based on the server.
I display them in the gridivew and i put the width and height to 300px; So it creates a square of 300 by 300 pixels like it should be.
But this makes the images crop to 300x300 pixels, but I want the pictures at their original size with a overflow:hidden;
I tried to add it trough css on the imagefield, but nothing is happening.
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>
<asp:ImageField DataImageUrlField="value">
<ControlStyle CssClass="test" Height="300px" Width="300px" />
<HeaderStyle Width="300px" />
<ItemStyle Height="300px" Width="300px" />
</asp:ImageField>
</Columns>
</asp:GridView>
CSS
.test{
overflow:hidden;
}
How about change img to div, and use image as background:
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="background-image:url(<%# Eval("value") %>);width:300px;height:300px;background-repeat:no-repeat;"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I have a simple ASP.NET form that Im using to learn some AJAX controls.
My code is:
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px"
BorderStyle="Solid" BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel1" runat="server">
</ajaxToolkit:DragPanelExtender>
</form>
My problem is that when I drag the Panel it doesn't stay where I leave it. It immediately moves back. shouldn't it stay where I leave it. I appreciate if I postback it will move back but I'm staying on the page incurring no new events.
Is this right?
Mike
I never used drag panel but I think there is something wrong with your markup.
Both the DragHandleID and TargetControlID are set to Panel1 which is wrong.
DragHandleID="Panel1" TargetControlID="Panel1"
According to the example on the Ajax site it's markup is http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
In the above markup they have used different panels for the targetControlID and DragHandleID
so you should update your markup as
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
</ajaxToolkit:DragPanelExtender>
I've got an alignment issue:
What I need is for the 'Delete Reasons' text to be vertically aligned, centered with the red 'X'. I tried using a div tag with CSS and style="verticalalign: middle;" but it forced 'Delete Reasons' to go underneath the 'X'.
How can I vertically center the text? Any help is greatly appreciated!
PS - Here's the code:
<tr>
<td class="style7" valign="middle">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="ibClearReasons" runat="server" Height="30px" Width="30px" ImageUrl="~/Images/DeleteRed.png" AlternateText="Delete" />Delete Reasons
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td class="style6">
<asp:LinkButton ID="SendToBatch" runat="server" BackColor="#20548E" BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small" Font-Underline="False"
ForeColor="White" Height="16px" Width="85px" EnableViewState="True" CausesValidation="False"><center>Send To Batch</center></asp:LinkButton>
</td>
</tr>
EDIT: CSS Style 7:
.style7
{
text-align: left;
vertical-align: middle;
}
You have to set the vertical-align attribute on the element: http://jsfiddle.net/rkw79/Zs5AH/
There is a good chance that it will still look off if the img height is small. For issues like that, you would need to wrap 'delete reasons' inside a <span> tag and give it a padding-top attribute.
Try this...
<td class="style7" valign="middle">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left;margin:0px 4px;width:30px;">
<asp:ImageButton ID="ibClearReasons"
runat="server"
Height="30px"
Width="30px"
ImageUrl="~/Images/DeleteRed.png"
AlternateText="Delete" />
</div>
<div style="float:left;height:30px;padding:6px 0px;width:100px;">
Delete Reasons
</div>
<div style="clear:both"></div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
You may have to play with the padding and/or width on the second div to get it to be just right. If this works, you can simply move the inline styles to a css file with class names (div.className) HTH
I am not sure what has happened here, but I have 3 panels, and these 3 panels are nested inside one large, thus:
<asp:panel id="pnlMain" runat="server" Height="60%" Width="100%">
<div id="div1">
<asp:panel id="panel1" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div2">
<asp:panel id="panel2" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div3">
<asp:panel id="panel3" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
</asp:panel>
What is happening is that when I add my gridviews to these nested panels, the panel is just getting larger, the scroll bars are not scrolling, in other words the panels are stretching rather than their height staying fixed.
How do I fix this?
Thanks
Try changing your heights to a fixed number rather than 100%.