Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

Need to eliminate the gap between two gridviews which are side by side

Posted on 2010-11-17
16
Medium Priority
?
1,532 Views
Last Modified: 2012-05-10
Hello,
   I have two gridviews which I have side by side using a table. Each of these gridviews are formatted to show two columns and have the other three are available so you can scroll to them. However when I display them I have a gap between two gridviews which does not go away no matter what I do, please see attached image.
Could you please tell me how to make that gap disapear?
Also is there anyway to make the gridviews resize depending on the screen size(not as important as making the gap disapear)?
Thank you,
Peter

The relevant part of my code is below:
 <table width="50%" style="overflow:scroll">
    <tr>
    <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" style="width:40%; height:300; overflow:scroll;">
                <ContentTemplate>
                    <asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView1_RowUpdating" 
                        onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0" 
                        CellSpacing="0" Width="100%">
                        <Columns>
                            <asp:BoundField HeaderText="A" DataField="A" />
                            <asp:BoundField HeaderText="B" DataField="B" />
                            <asp:BoundField HeaderText="C" DataField="C" />
                            <asp:BoundField HeaderText="D" DataField="D" />
                            <asp:BoundField HeaderText="E" DataField="E" />
                        </Columns>
                    </asp:Gridview>
                </ContentTemplate>
        </asp:UpdatePanel>
    </td>

    <td >
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" style="width:40%; height:300; overflow:scroll;">
                <ContentTemplate>
                    <asp:Gridview ID="EditableGrid2" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView2_RowUpdating" 
                        onrowdatabound="EditableGrid2_RowDataBound" BorderStyle="None" 
                        CellPadding="0" CellSpacing="0" Width="100%">
                    <Columns>
                        <asp:BoundField HeaderText="A" DataField="A" />
                        <asp:BoundField HeaderText="B" DataField="B" />
                        <asp:BoundField HeaderText="C" DataField="C" />
                        <asp:BoundField HeaderText="D" DataField="D" />
                        <asp:BoundField HeaderText="E" DataField="E" />
                    </Columns>
                    </asp:Gridview>
                </ContentTemplate>
         </asp:UpdatePanel>
    </td>
    </tr>
    </table>

Open in new window

screenshot.jpg
0
Comment
Question by:Epitel0920
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
16 Comments
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160369
Try the following in your HTML table.  I hope it works.

<table width="50%" border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">

or,

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160373
Oh by the way, try this as well (without the width)

<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">

0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160399
Just additional comment from my previous ones, I believe that your width property is the one causing the gap.  If you remove the width it should be ok.

<table style="overflow:scroll">

However, if you really want to eliminate all spacing, border, and padding then what I mentioned in my second post should be the way.

<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 3

Author Comment

by:Epitel0920
ID: 34160494
Thank you for the sugestions,  i tried them all but the damn gap is still there.
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160512
OK.  How about removing the width (width:40%) in both of your UpdatePanels?  Anyway, your Gridview is set as width=100%, so this should be okay on its own.
0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160550
Removing the width enlarges both of the gridviews eliminating the gap, however that is not what I want. What I need is for the gridviews to stay the size they are (at 40% or two columns) but next to each other.
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160601
OK.  What we need to do is to adjust GridView,  leave the width removed in the UpdatePanels and add divs on top of your GridView and remove the Width setting in GridView.  Something like this


<div style="width:40%;overflow:auto;">

<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView1_RowUpdating" 
                        onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0" 
                        CellSpacing="0">
<Columns>
                        <asp:BoundField HeaderText="A" DataField="A" />
                        <asp:BoundField HeaderText="B" DataField="B" />
                        <asp:BoundField HeaderText="C" DataField="C" />
                        <asp:BoundField HeaderText="D" DataField="D" />
                        <asp:BoundField HeaderText="E" DataField="E" />
                    </Columns>
                    </asp:Gridview>

</div>

Open in new window

0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160669
That keeps the gridview two columns wide, but the gap remains..
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34160691
OK.  That width:40% is causing this problem.  In your div, remove width and try it again.


<div style="overflow:auto;">

<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView1_RowUpdating" 
                        onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0" 
                        CellSpacing="0">
<Columns>
                        <asp:BoundField HeaderText="A" DataField="A" />
                        <asp:BoundField HeaderText="B" DataField="B" />
                        <asp:BoundField HeaderText="C" DataField="C" />
                        <asp:BoundField HeaderText="D" DataField="D" />
                        <asp:BoundField HeaderText="E" DataField="E" />
                    </Columns>
                    </asp:Gridview>

</div>

Open in new window

0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160731
Same result as before, it enlarges both grids to full size which fills the gap. But we need the grids to stay 2 columns wide
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34161056
How about if you try to adjust the width by reducing it to let say width:20% on the div?   I think you only need to adjust the width up to a point that the grids would be side by side.
0
 
LVL 2

Expert Comment

by:Schells_Web_Design
ID: 34161557
You can change line 1 to set a specific width in pixels instead of 50%. Maybe width=600

Then in line 3 change <td width=50%>
Then in line 23 change <td width=50%>

Then, play with the numbers in line 3 until you get them as close as you want.

You can also change line 3 to a specific pixel width, like <td width=300> and leave line 23 just as a <td> since line 1 and 3 are dictating the width of the table and the first column. The second column just takes up the extra space.

Hope that helps.
0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34168142
Alfred1: No, that just makes the gridviews smaller and increases the gap.
Schell: I tried all those ways and while they look good in the design view of VS, the browser still ignores all the changes and sticks in the gap.

I think the problem is the browser leaves the space for the whole gridview(not just the two columns) and forces the other design changes to adjust to it.
0
 
LVL 21

Accepted Solution

by:
Alfred A. earned 2000 total points
ID: 34169646
OK.  Can you try adding the Width=100% to the GridView (from my previous post)?  Also, try testing actual pixel width rather than percentage and check the results.  I modified your code below.  Also, try playing around with <table width="50%" style="overflow:scroll"> by removing the width and check the results.
<table width="50%" style="overflow:scroll">
    <tr>
    <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" style="height:300; overflow:scroll;">
                <ContentTemplate>

                    <div style="width:100px;overflow:auto;">

                    <asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView1_RowUpdating" 
                        onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0" 
                        CellSpacing="0" Width="100%">
                        <Columns>
                            <asp:BoundField HeaderText="A" DataField="A" />
                            <asp:BoundField HeaderText="B" DataField="B" />
                            <asp:BoundField HeaderText="C" DataField="C" />
                            <asp:BoundField HeaderText="D" DataField="D" />
                            <asp:BoundField HeaderText="E" DataField="E" />
                        </Columns>
                    </asp:Gridview>

                    </div>
                </ContentTemplate>
        </asp:UpdatePanel>
    </td>

    <td >
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" style="height:300; overflow:scroll;">
                <ContentTemplate>

                     <div style="width:100px;overflow:auto;">

                    <asp:Gridview ID="EditableGrid2" AutoGenerateColumns="False" 
                        runat="server" EnableInsert="False" SaveButtonID="" 
                        OnRowUpdating="EditableGridView2_RowUpdating" 
                        onrowdatabound="EditableGrid2_RowDataBound" BorderStyle="None" 
                        CellPadding="0" CellSpacing="0" Width="100%">
                    <Columns>
                        <asp:BoundField HeaderText="A" DataField="A" />
                        <asp:BoundField HeaderText="B" DataField="B" />
                        <asp:BoundField HeaderText="C" DataField="C" />
                        <asp:BoundField HeaderText="D" DataField="D" />
                        <asp:BoundField HeaderText="E" DataField="E" />
                    </Columns>
                    </asp:Gridview>

                    </div>
                </ContentTemplate>
         </asp:UpdatePanel>
    </td>
    </tr>
    </table>

Open in new window

0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34173361
Thank you very much for all your help, that did it!!
0
 
LVL 21

Expert Comment

by:Alfred A.
ID: 34173417
@Epitel0920,

No worries, mate!  Glad that I could help.

Hey, thanks as well.  My member rank now is Sage with the points I got from you.  :-)

0

Featured Post

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

647 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question