cssfriendly Forum Rss Feed

New Post: CssFriendly and tab key, keyboard arrow key navigation missing

jagtapswapnil — Wed, 29 Aug 2012 05:24:02 GMT

I got CssFriendly adapter to work on asp:menu in my project, however, I am having problem with accessing the menu using the tab key from the keyboard.

Without the adapter, I can tab to the menu items, then use the left/right arrows keys to move around the top level of the menu items, and down arrow key to display the second level of the items (like the hover effect from using the mouse). With the adapter, I can't do these functions.

Do I need to customization (how?)? or am I missing something in styling the menu css control? Please help.

New Post: Works Only on Postback, not on first page load

markmeikle — Mon, 06 Aug 2012 18:53:07 GMT

I am using the adapters at legacyfundraiser.com and easysonglicensing.com.

In Chrome, it works, but only after a page reload. For example if I search my sites on Google and click the search result to go to the site, the asp.net menu I use apparently has no CSS style at all attached to it. If I reload the page by refreshing, or clicking any link, it looks good.

I am using the following vb.net code in my master page. When I try removing this code, no CSS appears at all, even on a refresh. Any ideas?

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

        Dim temp As String = Request.UserAgent.ToLower
        If temp.Contains("applewebkit") Or temp.Contains("safari") Or temp.Contains("chrome") Then
            Request.Browser.Adapters.Clear()
        End If

        Dim j As String = Page.Request.ServerVariables("http_user_agent").ToLower()
        If j.Contains("safari") Or j.Contains("chrome") Then
            Page.ClientTarget = "uplevel"
        End If

    End Sub

New Post: CSS Friendly Menu Adapter with 5 tiers

barkleyr — Wed, 28 Mar 2012 15:00:28 GMT

I am using the CSS Friendly Menu adapter to create a menu with 5 tiers. When I hover over each tier 3 item, tiers 4 and 5 for that item automatically expand out completely, which is undesirable. I've tried adding additional entries to the CSS file, but I can only control the style of the menu tiers, I can't stop tier 5 from popping up until I hover over the tier4 items. What other file needs to be edited to control this behavior, or am I overlooking something very simple???

Here is my code. (just a simple menu to demonstrate my issue.)

        <asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
            <Items>
                <asp:MenuItem Text="Music">
                    <asp:MenuItem Text="Classical" />
                    <asp:MenuItem Text="Rock">
                        <asp:MenuItem Text="Electric">
                            <asp:MenuItem Text="Electrical1">
                                <asp:MenuItem Text="Electrical 1.1"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 1.2"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 1.3"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Electrical2">
                                <asp:MenuItem Text="Electrical 2.1"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 2.2"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 2.3"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Electrical3">
                                <asp:MenuItem Text="Electrical 3.1"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 3.2"></asp:MenuItem>
                                <asp:MenuItem Text="Electrical 3.3"></asp:MenuItem>
                            </asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Acoustical">
                            <asp:MenuItem Text="Acoustical 1">
                                <asp:MenuItem Text="Acoustical 1.1"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 1.2"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 1.3"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Acoustical 2">
                                <asp:MenuItem Text="Acoustical 2.1"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 2.2"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 2.3"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Acoustical 3">
                                <asp:MenuItem Text="Acoustical 3.1"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 3.2"></asp:MenuItem>
                                <asp:MenuItem Text="Acoustical 3.3"></asp:MenuItem>
                            </asp:MenuItem>
                        </asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Jazz" />
                </asp:MenuItem>
                <asp:MenuItem Text="Movies" Selectable="false">
                    <asp:MenuItem Text="Action" />
                    <asp:MenuItem Text="Drama" />
                    <asp:MenuItem Text="Musical" />
                </asp:MenuItem>
            </Items>
        </asp:Menu>

Here is my CSS File

.SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
{
    width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
}

.SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
{
    width: 6em;
    top: 100%;
    left: 0;
}

.SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
{
    top: 0em;
    left: 6em;
}

.SimpleEntertainmentMenu li /* all list items */
{
    width: 6em;
    background: #eeeeee;
}

.SimpleEntertainmentMenu li:hover, /* list items being hovered over */
.SimpleEntertainmentMenu li.AspNet-Menu-Hover
{
    background: Black;
}

.SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
.SimpleEntertainmentMenu span
{
    color: Black;
    padding: 4px 2px 4px 8px;
    border:1px solid #cccccc;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

.SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
.SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
{
    background-image: none !important;
}

.SimpleEntertainmentMenu li:hover a, /* hovered text */
.SimpleEntertainmentMenu li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
    color: White;
    background: transparent url(activeArrowRight.gif) right center no-repeat;
}

.SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
.SimpleEntertainmentMenu li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
.SimpleEntertainmentMenu li:hover li:hover li a,
.SimpleEntertainmentMenu li:hover li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span,
.SimpleEntertainmentMenu li:hover li:hover li:hover li a,
.SimpleEntertainmentMenu li:hover li:hover li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover li a,
.SimpleEntertainmentMenu li:hover li:hover li:hover li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
    color: Black;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

.SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
{
    border: solid 1px #00ff00 !important;
}

.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
{
    border: solid 1px #ff0000 !important;
}

.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
{
    border: solid 1px #0000ff !important;
}

#EntertainmentMessage
{
    padding-top: 2em;
    clear: both;
}

New Post: Remove WebResource dependencies to CSS and scripts

MarkRullo — Thu, 24 Nov 2011 20:28:03 GMT

Rocky23, did you get a response on this one yet?

New Post: Unable to create type 'CSSFriendly.MenuAdapter'.

jaafar_abusair — Wed, 23 Nov 2011 12:19:39 GMT

and i got this from plesk

Hello,

Thank you for contacting Parallels Technical Support. “the plesk server not support the CSSFriendly”

I could understand that you are facing issues while trying to install tool CSSFriendly in Domain 'www.**********'. CSSFriendly is a custom Application tool which is not officially tested with Plesk. Plesk supports the Applications of a Domain installed through Plesk Application Vault. So the issue regarding CSSFriendly installation is out of scope of Parallels technical support. There are no known bugs reported regarding CSSFriendly installation with Plesk. I would recommend you to contact your Domain Administrator who can help you better.

New Post: Unable to create type 'CSSFriendly.MenuAdapter'.

jaafar_abusair — Wed, 16 Nov 2011 16:03:02 GMT

Hi guys,

i created a web site recently and i used CSSfriendly everything was working perfectly on the development server, but after i puplish the site to hosting server that used Parallel Plask Panel

the CSSfriendly stopped work and i keep got this message

Unable to create type 'CSSFriendly.LoginStatusAdapter'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Exception: Unable to create type 'CSSFriendly.LoginStatusAdapter'.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:


[Exception: Unable to create type 'CSSFriendly.LoginStatusAdapter'.]
   System.Web.Configuration.HttpCapabilitiesBase.GetAdapter(Control control) +8719180
   System.Web.UI.Control.ResolveAdapter() +77
   System.Web.UI.Control.InitRecursive(Control namingContainer) +19
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +378

i tried to create this case on the development server and as i found it's appear when i delete the CSSFriendly.dll from the bin folder on website root,

i check the production server and the dll exist there but why this error keep appearing .

New Post: MenuControlAdapter +IE9

ngruson — Wed, 28 Sep 2011 15:37:53 GMT

Hi,

My web application uses the MenuControlAdapter to show ASP.NET menus. I just installed IE9 and now my web application is not showing menu items correctly. It turns out that the style 'UL.AspNet-Menu LI A' is the issue.

The style looks like this:

UL.AspNet-Menu LI A

{

height: 1% important;

}

After checking out the page in the Web Developer Toolbar, it shows that my issue would be resolved if I could set the height style to auto. I tried to do this in my CSS stylesheet but it keeps applying the default style with height=1%. How can I override this style in my application?

Regards,

Nils

New Post: Remove WebResource dependencies to CSS and scripts

Rocky23 — Tue, 20 Sep 2011 15:21:57 GMT

Hi there,

I'm just trying to streamline my website before release and I'm trying to remove the WebResource's that attach to my page. I use my own CSS to override the default, and the javascript is embedded into the .dll, although when I run the page through a web analysis tool it pops up with these 3:

View a formatted version of this HTML file
1	Not found	SCRIPT	http://www.elfabtech.com/WebResource.axd?...	Header size = 189 bytes Up to 1350 bytes could have been saved through compression.
1	Not found	CSS	http://www.elfabtech.com/WebResource.axd?...	Header size = 189 bytes Up to 1350 bytes could have been saved through compression. View a formatted version of this CSS file
1	Not found	CSS	http://www.elfabtech.com/WebResource.axd?...	Header size = 189 bytes Up to 1350 bytes could have been saved through compression. View a formatted version of this CSS file

I went through the .dll and stripped out a fair bit, now the external CSS files (default ones you kindly supply) don't load anymore, but the WebResource reference is still there, is it possible to get rid of it?

Thanks!

Rocky

New Post: System.Security.SecurityException since change set 4439

niceguymattx — Wed, 01 Jun 2011 09:56:49 GMT

I'm having this exact issue and removing trust level or setting to full trust doesnt help.

Any update?

New Post: Security trimming issue

dayo4me — Sun, 02 Jan 2011 18:27:00 GMT

I used css adapter menu control on an application in order to hide an admin link from unautherized users and enabling security trimming but the link always shows. But it worked when i used ordinary asp.net 2.0 menu control. Please is there a solution to the issue because i will prefer to use the CSSFriendly adapter menu control to the normal one

New Post: Security trimming issue

dayo4me — Sun, 02 Jan 2011 18:26:30 GMT

New Post: Code renders differenty after project is compiled?!?

TreelessSW — Thu, 28 Oct 2010 20:08:19 GMT

I just posted a discussion concerning this. This has to do with VS2010 assuming version 4 for browser definitions even if you has set the web site as 2 or 3.5. All you have to do is delete the app_browser.dll file in the bin folder (which you shouldn't have to do, but......) after you publish. I found the solution at http://www.5limes.com.au/blog/index.php/vs-2010-web-publishing-issue-with-the-browser-files.html

New Post: Menu not rendering after publish with VS2010

TreelessSW — Thu, 28 Oct 2010 19:41:37 GMT

I just converted a web site from using VS 2008 to 2010. Testing the web site locally within VS2010 everthing works fine, but once I publish to my web site the menu does not render correctly. What appears is the text of the top level in the menu and when you hover over, it shows a white box with nothing in it. The only thing I could find online is at http://www.5limes.com.au/blog/index.php/vs-2010-web-publishing-issue-with-the-browser-files.html where they describe the same issue. After publishing, just delete the App_browser.dll file in the bin folder and everything work again. VS 2010 is using dot net assembly level 4 even though the configuration says 2 or 3.5.

There has to be a better way then to delete a file after publishing.

New Post: Safari Issues

shahdat45ict1 — Wed, 06 Oct 2010 14:41:57 GMT

Hi You can see http://www.codeproject.com/KB/aspnet/HorizontalSubmenu.aspx

Hope this help.

New Post: DataList Width and CssClass property not working

vicrry — Wed, 06 Oct 2010 03:04:13 GMT

I have been having problems that data lists can never stretch to 100% nor any width settings, no matter with the Width property nor having a CssClass and setting it's width.

By going through the html source and CssFriendly source, I noticed that the table underneath the data list div tag has never been touched except CellPadding and Cellspacing.

At this moment I modified the source code to merge CssClass and Width into the table tag, but I would like to know if it is the expected way to have me reference the table from some other ways.

Anyone experience that same or have an idea?

New Post: Safari Issues

MickeyElliott — Wed, 25 Aug 2010 21:58:48 GMT

I found this by snooping around. The only issue that this makes is that it stripps your styles.

Please paste below code in your page_load event of page or master page and then test it on mac safari. Its working fine.

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
        {

            Request.Browser.Adapters.Clear();

        }

New Post: TreeView + SiteMapDataSource + postback causes error

kimquigley — Fri, 23 Jul 2010 13:59:35 GMT

The combination of using a TreeView bound to a SiteMapDataSource with the CSS friendly adapter AND something on a page that causes a postback causes a javascript error. To reproduce this issue, create a Web Site with a web.sitemap file, a default.aspx page, an App_Code folder containing TreeViewAdapter.cs and WebControlAdapterExtender.cs, and the App_Browsers folder containing CSSFriendlyAdapters.browser.

web.sitemap:

<siteMap>
  <siteMapNode url="~/Default.aspx" title="Home">
  </siteMapNode>
</siteMap>

Default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" />
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"  />
    </form>
</body>
</html>

CSSFriendlyAdapters.browser:

Browse to the Default.aspx page, then click the button. The error is in this code which is automatically generated and can't be edited:

New Post: Adding a Treeview, is it as simple as it seems ?

Dinalli — Tue, 06 Jul 2010 11:09:59 GMT

Okay im sure ive missed something here.

Im trying to use the Treeview adapter in my solution, with this browser file. I have also added the CCSFriendly.dll to my references. However the Treeview still renders as a Table any ideas.

<browsers>
  <browser refID="Default">
  <controlAdapters>
    <adapter controlType="System.Web.UI.WebControls.TreeView"
             adapterType="CSSFriendly.TreeViewAdapter" />
  </controlAdapters>
</browser>

<browser id="W3C_Validator" parentID="default">
  <identification>
    <userAgent match="^W3C_Validator" />
  </identification>
  <capabilities>
    <capability name="browser"              value="W3C Validator" />
    <capability name="ecmaScriptVersion"    value="1.2" />
    <capability name="javascript"           value="true" />
    <capability name="supportsCss"          value="true" />
    <capability name="supportsCallback"     value="true" />
    <capability name="tables"               value="true" />
    <capability name="tagWriter"            value="System.Web.UI.HtmlTextWriter" />
    <capability name="w3cdomversion"        value="1.0" />
  </capabilities>
</browser>
</browsers>

Tree view

           <asp:TreeView ID="tvPages" ExpandDepth="0" runat="server" CssClass="treeView"
             OnTreeNodePopulate="tvPages_TreeNodePopulate" 
             OnSelectedNodeChanged="tvPages_SelectedNodeChanged" OnTreeNodeExpanded="tvPages_TreeNodeExpanded1"
              >
                <Nodes>
                    <asp:TreeNode Text="BluJamSite" PopulateOnDemand="True" Value="1" ></asp:TreeNode>
                </Nodes>
            </asp:TreeView>

New Post: Code renders differenty after project is compiled?!?

joshbroton — Fri, 02 Jul 2010 04:07:33 GMT

I re-installed VS2008, and poof, everything works again. No changes at all. I would go back to 2008 and wait for the adapters to be fixed.

New Post: WebControlAdapter duplicates tag for GridView
Ph03n1X — Thu, 24 Jun 2010 12:36:36 GMT
Given the age of this thread, I'm surprised there aren't more replies. I just encountered this bug while writing a custom adapter for the GridView. You've probably found a solution of your own by now, but I thought I'd post mine in case anybody else does the same google search I did: deriving the adapter directly from ControlAdapter instead of WebControlAdapter fixes the issue.