[Solved] Issue with RadRibbonBar Spacing

[Michael]

Hello,

I have an issue with the spacing of the RadRibbonBar...see the video below. What I need to do is remove the Red Area. Please note the color is simply used for contrast.
Demo of Issue

ASPX

<div id="dsxWeb">
        <div id="ribbonBar">
            <div class="autoSpacer">
                <telerik:RadRibbonBar  ID="dsxWebRibbon" runat="server" EnableQuickAccessToolbar="true" EnableMinimizing="true">
                <ApplicationMenu Text="File">
                         <Items>
                              <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="images/icon_open16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="images/icon_save16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                         </Items>
                </ApplicationMenu>
                <Tabs>
                    <telerik:RibbonBarTab Text="Home">
                        <telerik:RibbonBarGroup Text="DSX Home">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Open Home" ImageUrl="images/dashboard.png" CommandName="opendc" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Workspace">
                            <Items>
                                <telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="File" ImageUrlLarge="images/icon_save.png" ImageUrl="images/icon_save16.png">
                                    <Items>
                                                  <telerik:RibbonBarMenuItem Text="Save" ImageUrl="images/icon_save16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Open" ImageUrl="images/icon_open16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png"></telerik:RibbonBarMenuItem>
                                             </Items>
                                </telerik:RibbonBarMenu>
                                 <telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="Navigation" ImageUrlLarge="images/home_navigation.png" ImageUrl="images/home_navigation16.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem Text="Left" ImageUrl="images/navigation_left.png" CommandName="choosenav" CommandArgument="navigationLeft"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Top" ImageUrl="images/navigation_top.png" CommandName="choosenav" CommandArgument="navigationTop"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Right" ImageUrl="images/navigation_right.png" CommandName="choosenav" CommandArgument="navigationRight"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Bottom" ImageUrl="images/navigation_bottom.png" CommandName="choosenav" CommandArgument="navigationBottom"></telerik:RibbonBarMenuItem>

                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarButton QuickAccess="Active" Size="Large" Text="Refresh" ImageUrl="images/home_refresh.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Data">
                        <telerik:RibbonBarGroup Text="Database">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Restore" ImageUrl="images/restoredb.png"/>
                                <telerik:RibbonBarButton Size="Large" Text="Sandbox" ImageUrl="images/sandboxdb.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Record">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="New" ImageUrl="images/addrecord.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Delete" ImageUrl="images/deleterecord.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Zero Data Fields" ImageUrl="images/zerorecord.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Reports">
                        <telerik:RibbonBarGroup Text="Standard">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Fiscal" ImageUrl="images/report_fiscal.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Item Master" ImageUrl="images/report_itemmaster.png" />
                                <telerik:RibbonBarButton Size="Large" Text="History-Forecast" ImageUrl="images/report_historyforecast.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Shortage" ImageUrl="images/report_shortage.png" />
                                <telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/report_abc.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/report_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance Summary" ImageUrl="images/report_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Basic Inventory" ImageUrl="images/report_basicinventory.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Valuation Inventory" ImageUrl="images/report_valuationinventory.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Process">
                        <telerik:RibbonBarGroup Text="Convert">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Currency" ImageUrl="images/convert_currency.png" />
                                <telerik:RibbonBarButton Size="Large" Text="UOM" ImageUrl="images/convert_uom.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Forecast Mangement">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Forecasting" ImageUrl="images/fm_forecasting.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/fm_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/fm_abc.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Aggregation" ImageUrl="images/fm_aggregation.png" />
                                <telerik:RibbonBarButton Size="Large" Text="BOM" ImageUrl="images/fm_bom.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Inventory" ImageUrl="images/fm_inventory.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Promotions" ImageUrl="images/fm_promotions.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Create">
                        <telerik:RibbonBarGroup Text="Panels">
                            <Items>
                                <telerik:RibbonBarSplitButton ID="createDescriptive" Size="Large" Text="Descriptive" ImageUrlLarge ="images/widgets_descriptive.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Descriptive Panels' CommandName='managewidgets' CommandArgument='0' />
                                        <telerik:RibbonBarButton Text='Description Panel #1' CommandName='descriptionpanel' CommandArgument='1' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createAggregation" Size="Large" Text="Aggregation" ImageUrlLarge="images/widgets_aggregation.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Aggregation Panels' CommandName='managewidgets' CommandArgument='1' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createSpreadsheets" Size="Large" Text="Spreadsheets" ImageUrlLarge="images/widgets_spreadsheets.png" CommandName="managespreadsheets">
                                    <Buttons>
                                       <telerik:RibbonBarButton Text='Edit/Create Spreadsheet Panels' CommandName='managewidgets' CommandArgument='2' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createCharts" Size="Large" Text="Charts" ImageUrlLarge="images/widgets_charts.png" CommandName="managecharts">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Chart Panels' CommandName='managewidgets' CommandArgument='3' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createDashboard" Size="Large" Text="Dashboard" ImageUrlLarge="images/widgets_dashboard.png" CommandName="managedashboard">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Dashboard Panels' CommandName='managewidgets' CommandArgument='4' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Builders">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Curves" ImageUrl="images/builders_curves.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Calendars" ImageUrl="images/builders_calendars.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Ranges" ImageUrl="images/builders_ranges.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Closed Day Calendars" ImageUrl="images/builders_closeddaycalendars.png" />
                                <telerik:RibbonBarButton Size="Large" Text="APS Refresh" ImageUrl="images/builders_apsrefresh.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Admin">
                        <telerik:RibbonBarGroup Text="Security">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Users" ImageUrl="images/security_users.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Roles" ImageUrl="images/security_roles.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="DBA">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Supersession" ImageUrl="images/dba_supersession.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Batch Builder" ImageUrl="images/dba_batchbuilder.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Global Changes" ImageUrl="images/dba_globalchanges.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Delete Records" ImageUrl="images/dba_deleterecords.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Field Mangement" ImageUrl="images/dba_fieldmanagement.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>

                </Tabs>
            </telerik:RadRibbonBar>
            </div>
        </div>
        <div id="mainContent">
             <div class="autoSpacer">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
                <telerik:RadPane ID="navigationPane" runat="server" Width="150">
                Navigation
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Both">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="contentPane" runat="server">
                Panels
                </telerik:RadPane>
            </telerik:RadSplitter>
            </div>
        </div>
        <div id="statusBar">
             <div class="autoSpacer">
            Status Bar
            </div>
        </div>
    </div>

CSS Used:

#dsxWeb
{
    position: absolute;
    display: table;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}

#ribbonBar
{
    display: table-row;
    background-color: Red;
}

#dsxWebRibbon
{
   padding: 0px;
}

#mainContent
{
    display: table-row;
    background-color: Yellow;
}
#statusBar
{
    display: table-row;
    width: 100%;
    height: 40px;
    background-color: #3399FF;

}

.autoSpacer
{
    display: table-cell;
    vertical-align: top;
}

Any help would be great.

Michael

[Ivan Zhekov]

Hello, Michael.

The issue is not related to RadRibbonBar, but rather the design technique you are using:

when it comes to tables, by design all rows / cells are equal in width / height. If a cell has height (say like the footer), the rest will distribute the space evenly (or try to do so). Also, if the content of a cell is more than the space available, it will stretch the cell, unless otherwise specified (overflow: hidden).

In your particular case you have set height to just the footer. so the other two columns will try somehow to work out the height.

To solve this, you need to set #ribbonBar "cell" a small height, say 20 pixels, or 1% or something small. When the ribbon content is rendered it will stretch the div to the appropriate height and the middle cell will also have proper size.

Regards,
Ivan Zhekov
the Telerik team