This is a migrated thread and some comments may be shown as answers.

[Solved] Grid Outline border extending into outside div tag

1 Answer 178 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Phil asked on 15 May 2013, 07:56 PM

GridExample.png

Hi:

I have a RaDGrid that has a DIV tag that is above the grid, but the outline border included the DIV tag. Code is as follows:

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<script runat="server">

'

Protected Sub personGrid_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles personGrid.NeedDataSource

Dim _people As List(Of String) = New List(Of String) From { _

"George Washington", "John Adams", "Thomas Jefferson"}

personGrid.DataSource = _people

End Sub

'

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

<Scripts>

<asp:ScriptReference Path="Scripts/jquery-1.8.2.min.js" />

</Scripts>

</telerik:RadScriptManager>

<br />

<div style="width: 100%">

<div style="width: 130px; float: left;">People:</div>

<div style="width: 475px; float: left;">...</div>

</div>

<div style="width: 100%">

<Telerik:RadGrid

ID="personGrid" runat="server" GridLines="None" CellSpacing="0">

<MasterTableView AutoGenerateColumns="true">

</MasterTableView>

</Telerik:RadGrid>

</div>

<br />

</form>

</body>

</html>

So the following DIV tags:

<div style="width: 100%">

<div style="width: 130px; float: left;">People:</div>

<div style="width: 475px; float: left;">...</div>

</div>

Appear as if they are a part of the grid, but I do not want this appearance. Attached is a screenshot...
Phil

1 Answer, 1 is accepted

Accepted

answered on 16 May 2013, 06:10 AM

Hi,

To achieve your scenario please try the following code. Here I added clear to turning off the float.

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.
ASPX:

<div style="width: 100%">

<div style="width: 130px; float: left;">People:</div>

<div style="width: 475px; float: left;">...</div>

</div>

<div style="width: 100% ;clear: both;">

<telerik:RadGrid ID="grid1" runat="server" Width="200px">

... ... ...

</telerik:RadGrid>

</div>

Hope this will help.

Thanks,
Princy.