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
CSS Used:
Any help would be great.
Michael
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