[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Alignment problem in table with comboboxes

Posted on 2009-12-29
4
Medium Priority
?
1,144 Views
Last Modified: 2012-05-08
Hi Experts,
I have a table with several lines, of which 2 lines have actual content (others are space holders):
line 1 has 3 rows (2 with a combo box and 1 with an info button)
line 2 has 1 row > colspan 3 (with 1 gridview)

When I select a value in the first combobox the second appears. However as shown in screenshot 2 it is not aligned right next to the first combobox. Hope someone can tell me what I need to do to get the alignment correct.

I added the aspx code below.

Regards, MB


<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/VRS.Master" CodeBehind="VoyageStatistics.aspx.vb" Inherits="VRS.WebForm4" title="GR Vessel Reporting System" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
    <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
        <script type="text/javascript">
            function openRadWin()
            {
            radopen("InfoVoyageStatistics.html", "RadWindow");
            }
        </script>
    </telerik:RadCodeBlock>
        
    <telerik:RadWindowManager ID="RadWindowManager1"
        IconUrl ="~/Images/icoInfo.ico"
        Modal="true"
        runat="server"
        VisibleStatusbar="false"
        Width="350"
        Height="275"
        Behaviors="Close">
        <Windows>
            <telerik:RadWindow
                ID="RadWindow"
                runat="server"
                Showcontentduringload="false"
                Title="Vessel performance">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="cboSource">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="cboLoadPorts" />
                        <telerik:AjaxUpdatedControl ControlID="cboDischargingPorts" />
                        <telerik:AjaxUpdatedControl ControlID="rgvVoyageStatistics" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cboDischargingPorts">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rcTechnical" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rgvVoyageStatistics">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgvVoyageStatistics" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    
    <table style="width: 100%; height: 100%;">
        <tr style="height: 10px">
            <td>
                <telerik:RadComboBox
                    ID="cboLoadPorts"
                    Runat="server"
                    AutoPostBack="true"
                    MarkFirstMatch="true"   
                    AllowCustomText="false"
                    Width="200"
                    Height="500"
                    EmptyMessage="Select start leg">
                    <CollapseAnimation Type="OutQuint" Duration="200"> </CollapseAnimation>
                </telerik:RadComboBox>
            </td>
            <td>
                <telerik:RadComboBox
                    ID="cboDischargingPorts"
                    Runat="server"
                    AutoPostBack="true"
                    MarkFirstMatch="true"
                    AllowCustomText="false"
                    Width="200"
                    EmptyMessage="Select end leg">
                    <CollapseAnimation Type="OutQuint" Duration="200"> </CollapseAnimation>
                </telerik:RadComboBox>
            </td>
            <td>
            </td>
            <td style="width: 30px">
                <asp:ImageButton ID="ImageInfoButton"
                    runat="server"
                    ImageUrl = "~/Images/imgInfo.gif"
                    ImageAlign ="Middle" 
                    OnClientClick="openRadWin(); return false;" />
            </td>
        </tr>
        <tr style="height: 10px">
            <td colspan="4">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <telerik:RadGrid ID="rgvVoyageStatistics"
                    runat="server"
                    AutoGenerateColumns="False"
                    AllowSorting ="true" 
                    GridLines="None">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn
                               ItemStyle-Width="125"
                               HeaderStyle-Width="125"
                               DataField="Vessel"
                               DataType="System.String"
                               HeaderText="Vessel"
                               SortExpression="Vessel"
                               UniqueName="Vessel" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="Voyage"
                               DataType="System.Int16" 
                               HeaderText="Voyage"
                               SortExpression="Voyage"
                               UniqueName="Voyage" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="100"
                               HeaderStyle-Width="100"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="CargoType"
                               DataType="System.String"
                               HeaderText="Cargo type"
                               SortExpression="CargoType"
                               UniqueName="CargoType" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="CargoOnBoard"
                               HeaderText="Cargo tonnage"
                               DataFormatString="{0:N0}"
                               SortExpression="CargoOnBoard"
                               UniqueName="CargoOnBoard" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgSpeed"
                               HeaderText="Agv speed"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgSpeed"
                               UniqueName="AvgSpeed" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgConsHFO"
                               HeaderText="Avg HFO cons"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgConsHFO"
                               UniqueName="AvgConsHFO" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgConsMDO"
                               HeaderText="Avg MDO cons"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgConsMDO"
                               UniqueName="AvgConsMDO" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgSpecCons"
                               HeaderText="Avg spec cons"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgSpecCons"
                               UniqueName="AvgSpecCons" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgSystemOilPerDay"
                               HeaderText="Avg system oil cons"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgSystemOilPerDay"
                               UniqueName="AvgSystemOilPerDay" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="AvgCylinderOilPerDay"
                               HeaderText="Avg cylinder oil cons"
                               DataFormatString="{0:N1}"
                               SortExpression="AvgCylinderOilPerDay"
                               UniqueName="AvgCylinderOilPerDay" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="DaysSteaming"
                               HeaderText="Days steaming"
                               DataFormatString="{0:N1}"
                               SortExpression="DaysSteaming"
                               UniqueName="DaysSteaming" />
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="Distance"
                               HeaderText="Distance"
                               DataFormatString="{0:N0}"
                               SortExpression="Distance"
                               UniqueName="Distance"/>
                            <telerik:GridBoundColumn
                               ItemStyle-Width="75"
                               HeaderStyle-Width="75"
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center"
                               DataField="DepartureDate"
                               HeaderText="ATD"
                               DataFormatString="{0:dd/MM/yyyy}"
                               SortExpression="DepartureDate"
                               UniqueName="DepartureDate"/>
                            <telerik:GridBoundColumn
                               ItemStyle-HorizontalAlign="Center"
                               HeaderStyle-HorizontalAlign="Center" 
                               DataField="Season"
                               SortExpression="DepartureDate"
                               DataType="System.String"
                               HeaderText="Season"
                               UniqueName="Season"/>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</asp:Content>

Open in new window

0
Comment
Question by:mark_norge
  • 2
4 Comments
 
LVL 26

Expert Comment

by:David Brugge
ID: 26143348
Hi Mark,

I believe that we're missing the screen shots that you are referring to.
0
 

Author Comment

by:mark_norge
ID: 26143744
Hi D_Brugge,

Apologies, attached the screenshots.

MB
screenshot1.jpg
screenshot2.jpg
0
 
LVL 19

Accepted Solution

by:
Melih SARICA earned 2000 total points
ID: 26144154
Its because of the table width you put ur comboboxes

U set them 100% width ...  dont give 100% width to table let explorer arrange it..   and itll be closed to eachother..

reason: when u give %100 to width and add 3 td(cells) in it.. explorer gave %33 width to each cell..


solution :
<table width="100%" >
<tr>
   <td>
       <table ><tr><td>combo1</td><td>combo2</td><td>emptyrow</td><td>infobutton</td></tr></table>
    </td>
</tr>
<tr>
   <td>
      datagrid
    </td>
</tr>
</table>

Melih SARICA
0
 

Author Closing Comment

by:mark_norge
ID: 31670771
Thanks a lot! I have been fighting with this for quite some time and this is a perfect solution. Regards, Mark
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
While opting for any web-to-print solution, you need to discuss with your team and some of your end users and know their opinions about your decisions. In this article we list down some questions you need to ask yourself.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
Suggested Courses

834 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