Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » toolbar looks terrible in FF?

toolbar looks terrible in FF? Options
Previous Topic · Next Topic
Ken Yee
Posted: Friday, November 13, 2009 11:46:29 AM
Rank: Member
Groups: Member

Joined: 11/13/2009
Posts: 22
Does the EO toolbar include free usage for ContextMenu and CallbackPanel? They're used in several toolbar samples and seem to be needed for asp controls in the menu.

The EO toolbar looks great in MSIE (7) but seems to look horrible in FF (3.5); in FF, the toolbar background sits above the toolbar buttons.
This is the code I put into test.aspx to test it:


<%@ Page Language="C#" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<eo:ToolBar id="ToolBar1"
SeparatorImage="00100204" BackgroundImage="00100203"
Width="100%" BackgroundImageRight="00100202" runat="server">
<DownStyle CssText="BORDER-RIGHT: #335ea8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #335ea8 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #335ea8 1px solid; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #335ea8 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffe1ac"></DownStyle>
<HoverStyle CssText="BORDER-RIGHT: #335ea8 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #335ea8 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; BORDER-LEFT: #335ea8 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #335ea8 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffe1ac"></HoverStyle>
<NormalStyle CssText="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 3px; CURSOR: hand; BORDER-TOP-STYLE: none; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"></NormalStyle>
<ItemTemplates>
<eo:ToolBarItem Type="Custom">
<HoverStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;"></HoverStyle>
<DownStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;"></DownStyle>
<NormalStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;"></NormalStyle>
</eo:ToolBarItem>
<eo:ToolBarItem Type="DropDownMenu">
<HoverStyle CssText="background-color:#ffe1ac;background-image:url('00100206');background-position-x:right;border-bottom-color:#335ea8;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#335ea8;border-left-style:solid;border-left-width:1px;border-right-color:#335ea8;border-right-style:solid;border-right-width:1px;border-top-color:#335ea8;border-top-style:solid;border-top-width:1px;cursor:hand;padding-bottom:2px;padding-left:3px;padding-right:3px;padding-top:2px;"></HoverStyle>
<DownStyle CssText="BORDER-RIGHT: #335ea8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #335ea8 1px solid; PADDING-LEFT: 4px; BACKGROUND-POSITION-X: right; BACKGROUND-IMAGE: url(00100206); PADDING-BOTTOM: 1px; BORDER-LEFT: #335ea8 1px solid; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #335ea8 1px solid; BACKGROUND-COLOR: #ffe1ac"></DownStyle>
<NormalStyle CssText="background-image:url('00100205');background-position-x:right;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;cursor:hand;padding-bottom:3px;padding-left:4px;padding-right:4px;padding-top:3px;"></NormalStyle>
</eo:ToolBarItem>
</ItemTemplates>
<Items>
<eo:ToolBarItem Type="Custom">
<CustomItem>
<asp:Literal ID="Literal5" runat="server" Text="*Start:"
/><asp:TextBox ID="TextBox3" runat="server" Enabled="false"
style="vertical-align:middle; font-size: 8pt;" Columns="12"
/><asp:Image runat="server" ImageUrl="images/calendar_big.gif"
width="20" Height="20"
style="vertical-align:middle" ID="Image3" />
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem Type="Custom">
<CustomItem>
<asp:Literal ID="Literal6" runat="server" Text="*End:"
/><asp:TextBox ID="TextBox4" runat="server" Enabled="false"
style="vertical-align:middle; font-size: 8pt;" Columns="12"
/><asp:Image runat="server" ImageUrl="images/calendar_big.gif"
width="20" Height="20"
style="vertical-align:middle" ID="Image4" />
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem Type="Custom">
<CustomItem>
<asp:Literal ID="Literal7" runat="server" Text="*Other:"
/><asp:DropDownList ID="DropDownList2" runat="server" style="vertical-align:middle; font-size: 8pt;"
>
<asp:ListItem Text="Custom" Value="customRange" />
<asp:ListItem Text="Current Day" Value="currentDay" Selected="true" />
<asp:ListItem Text="Last Day" Value="pastDay" />
<asp:ListItem Text="Last Week" Value="pastWeek" />
<asp:ListItem Text="Last Month" Value="pastMonth" />
<asp:ListItem Text="Past 3 Months" Value="past3Month" />
<asp:ListItem Text="Past 6 Months" Value="past6Month" />
<asp:ListItem Text="Past Year" Value="pastYear" />
</asp:DropDownList><asp:HiddenField ID="HiddenField2" runat="server" />
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem Text="Graph" ImageUrl="00101069" CommandName="Graph" ToolTip="Update Graphs" />
<eo:ToolBarItem Type="Separator"/>
<eo:ToolBarItem Type="DropDownMenu" Text="Export" ImageUrl="00101003" CommandName="Export"
DropDownMenuID="Menu1:export" ToolTip="Export Data to Local File" />
<eo:ToolBarItem Text="Options" ImageUrl="00101063" CommandName="Options" ToolTip="Change Display Options for Graphs" />
<eo:ToolBarItem Text="Logger" ImageUrl="00101024" CommandName="Logger" ToolTip="Switch to Different Logger" />
</Items>
</eo:ToolBar>

<eo:ContextMenu id="Menu1" runat="server" Width="200px" ControlSkinID="None" CheckIconUrl="OfficeCheckIcon2">
<TopGroup Style-CssText="background-color:#abc7f6;">
<Items>
<eo:MenuItem ItemID="export" Text-Html="Export">
<SubMenu>
<Items>
<eo:MenuItem ItemID="ExportAll" LeftIcon-Url="00000201" Text-Html="All"></eo:MenuItem>
<eo:MenuItem ItemID="ExportQ" LeftIcon-Url="00000206" Text-Html="Filter with Q"></eo:MenuItem>
<eo:MenuItem ItemID="ExportCSV" LeftIcon-Url="00101031" Text-Html="Export CSV"></eo:MenuItem>
<eo:MenuItem ItemID="ExportNDF" LeftIcon-Url="00101053" Text-Html="Export NDF"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;color:gray"
Height="24" HoverStyle-CssText="background-color:#C0D6F4;border-bottom-color:#000080;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#000080;border-left-style:solid;border-left-width:1px;border-right-color:#000080;border-right-style:solid;border-right-width:1px;border-top-color:#000080;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;"
ItemID="_TopLevelItem" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#000080;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#000080;border-left-style:solid;border-left-width:1px;border-right-color:#000080;border-right-style:solid;border-right-width:1px;border-top-color:#000080;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;">
<SubMenu CollapseEffect-Type="GlideTopToBottom" ExpandEffect-Type="GlideTopToBottom"
ItemSpacing="3" LeftIconCellWidth="25" SideImage="Office2003SideBar2" Style-CssText="background-color:#F6F6F6;border-bottom-color:#002D96;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#002D96;border-left-style:solid;border-left-width:1px;border-right-color:#002D96;border-right-style:solid;border-right-width:1px;border-top-color:#002D96;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#6a8ccb;height:1px;margin-left:30px;width:1px;">
</eo:MenuItem>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;color:gray"
Height="24" HoverStyle-CssText="background-color:#FFEEC2;border-bottom-color:#000080;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#000080;border-left-style:solid;border-left-width:1px;border-right-color:#000080;border-right-style:solid;border-right-width:1px;border-top-color:#000080;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
ItemID="_Default" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#000080;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#000080;border-left-style:solid;border-left-width:1px;border-right-color:#000080;border-right-style:solid;border-right-width:1px;border-top-color:#000080;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
Text-Padding-Right="30">
<SubMenu CollapseEffect-Type="GlideTopToBottom" ExpandEffect-Type="GlideTopToBottom"
ItemSpacing="3" LeftIconCellWidth="25" SideImage="Office2003SideBar2" Style-CssText="background-color:#F6F6F6;border-bottom-color:#002D96;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#002D96;border-left-style:solid;border-left-width:1px;border-right-color:#002D96;border-right-style:solid;border-right-width:1px;border-top-color:#002D96;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;">
</SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>

</div>
</form>
</body>
</html>
Back to top
 
eo_support
Posted: Friday, November 13, 2009 12:02:55 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
Hi,

You will need to give you custom item a fixed width to avoid FF automatically wraps your custom item into multiple lines. It will be something like this:

Code: HTML/ASPX 
<CustomItem>
    <div style="width:200px">
         ....your original custom item contents.....
    </div>
</CustomItem>


Using another control in a toolbar sample does not mean those controls are free. ContextMenu and CallbackPanel are sold separately. So if you wish to use those controls, you will need a license for those controls.

Thanks!
Back to top
 
Ken Yee
Posted: Friday, November 13, 2009 12:20:41 PM
Rank: Member
Groups: Member

Joined: 11/13/2009
Posts: 22
Thanks for the quick reply!

Sorry..the wrapping should have been obvious. Another thing you can do is use this for your div:
<div style="white-space: nowrap;">

You folks should probably use this for your samples.

I don't think buying a license will be a problem...nice product so far. I think the only thing I'd like is the ability to skin an entire app (i.e., your samples should be using css classes and have a recommended coding standard like jquery's themeroller) so we can just include a style sheet to change the look...
Back to top
 
eo_support
Posted: Friday, November 13, 2009 12:30:16 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
Ken Yee wrote:
Sorry..the wrapping should have been obvious. Another thing you can do is use this for your div:
<div style="white-space: nowrap;">

You folks should probably use this for your samples.

Great idea. Thank you very much for sharing!

Ken Yee wrote:
I don't think buying a license will be a problem...nice product so far. I think the only thing I'd like is the ability to skin an entire app (i.e., your samples should be using css classes and have a recommended coding standard like jquery's themeroller) so we can just include a style sheet to change the look...

Yes. You can do that. While our controls support a lot of customization options, the majority that are related to appearance settings are done through CSS styles. You can use both inline CSS Text or external CSS class for any of our style property. Our UI/samples uses CSS text by default so that people will be able to simply copy and paste to get something going. However there is a "To CSS Class" button in our "Builder" UI (for example, "Menu Builder" for Menu/ContextMenu), clicking that button will convert all inline CSS text used by the control to a list of CSS class. You can then put those classes into a separate .css file and switch the .css file to skin your app.

Thanks!
Back to top
 
Ken Yee
Posted: Friday, November 13, 2009 4:56:59 PM
Rank: Member
Groups: Member

Joined: 11/13/2009
Posts: 22
The good news it the To CSS Class button works with the submenu (ContextMenu), but it doesn't do anything when you try using it on the Toolbar. It creates an empty style block in the cssblock property and doesn't pull any styles out.
It also seems to some ID numbering/naming, so it's probably something that should be done last...if you add more controls, I'm not sure how it works since the classes reference ID's instead of putting classes in for each menu item...just some constructive feedback..
Back to top
 
eo_support
Posted: Friday, November 13, 2009 5:16:05 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
Ken Yee wrote:
The good news it the To CSS Class button works with the submenu (ContextMenu), but it doesn't do anything when you try using it on the Toolbar. It creates an empty style block in the cssblock property and doesn't pull any styles out.

That appears to be a problem. But you can always do it manually. The point is you can use CSS class so that you will be able to skin the controls.

Ken Yee wrote:
It also seems to some ID numbering/naming, so it's probably something that should be done last...if you add more controls, I'm not sure how it works since the classes reference ID's instead of putting classes in for each menu item...just some constructive feedback..

It uses automatically generated names when you do the conversion automatically. If you want to control the class names, you just pretend the button does not exist and supply your own CSS class names. For example, setting ToolBar.DisabledStyles.CssClass to whatever CSS class will apply that class when the button is disabled. This is the way how most other controls on the market work. Our advantage is we also support inline CSS text and a CSS Style Editor, which offers a number of benefits such as easy copy and paste, instant preview, etc. But when you wish to skin it, you just would use CSS class as you do with anybody else.

You may want to take a look of this class:

http://doc.essentialobjects.com/library/1/eo.web.elementstyle.aspx

This class is the key of our CSS implementation. Whenever other vendors have a "XXXCssClass" property (type as string), we would usually have a "XXXStyle" property (type as ElementStyle). The difference is while you can only give "XXXCssClass" a class name (for example, "red_item"), you can give both/either class name (for example, "red_item") or CSS text (for example, "color:red") to our "XXXStyle" property.

Don't worry about the ID clashing issue, we have worked out that years ago. :)

Thank you very much for your feedbacks though!

Thanks
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.