Looking for some help for a small display bug. Here is a code sample running on JBoss 7.0.2.Final with IceFaces 2.0.2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style>
*{margin: 0;padding: 0;font-family: Helvetica, Arial, Verdana ;font-size: 12px;}
.mainmenubar{width: 100%;height: 32px;background-color: blue;}
.mainmenubarItem{float: left;height: 27px;border-right: 1px solid white;padding-top: 5px;}
.mainmenubarItem a, .mainmenubarItem a:hover, .mainmenubarItem a span{color: white;font-size: 16px;font-weight: bold;text-decoration: none;}
.mainmenubarSubMenu{position: absolute;background-color: #F5F5F5;}
</style>
</h:head>
<h:body>
<div style="background-color: grey; width: 100%; height: 50px;" />
<ice:form id="menuform">
<ice:menuBar styleClass="mainmenubar" orientation="horizontal">
<ice:menuItem styleClass="mainmenuitem" id="mainmenu1" onclick="return false;" value="MENU1">
<ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu1" onclick="return false;" />
<ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu2" onclick="return false;" />
</ice:menuItem>
<ice:menuItem styleClass="mainmenuitem" id="mainmenu2" onclick="return false;" value="MENU2" />
</ice:menuBar>
</ice:form>
<div class="bottom" style="background-color: yellow; width: 100%; height: 1800px;" />
</h:body>
</html>
Seems I cannot directly upload files attached to this post to show screenshots. However, you should be able to copy/paste this code into any IceFaces project with similar configuration, open an IE7 version (in fact I do use IE8 with "compatibility view" mode activated, wonder if it has an effect).
If you do not scroll the page and hover the MENU1, you'll see the SUBMENU correctly displayed. However, if you scroll a little the page to have the menu on top of the page and hover the MENU1, you'll see that the SUBMENU is displayed about 50px under the menu. consequently, you'll never be able to click on the second menu...
Cannot figure out why this does not work. I had a look at the IceFaces showcase on http://component-showcase.icefaces.org/component-showcase/showcase.iface and saw it does work on my IE version (cannot really attest the showcase do use the same version of IceFaces as I do).
I made an additional test : taking the showcase code locally shows the same behaviour (with bug). Here is the exact code I'm running :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/xmlhttp/css/rime/rime.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_style.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_overrides.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_layout.css" />
</h:head>
<h:body>
<ice:panelGroup styleClass="componentBox">
<ice:panelGroup styleClass="synopsisBox menuBarContainer">
<ice:outputText value="The menuBar component provides a robust menu system." />
<ice:outputText value="In the box below, choose the orientation of the Menu Bar and then select a menu item. The backing been value of the selected item will be reflected under Server-side Backing Bean Values." />
</ice:panelGroup>
<ice:panelGroup styleClass="clearer" />
<!-- main menu declaration -->
<ice:panelGroup styleClass="exampleBox menuBarContainer">
<ice:menuBar id="menuBar" orientation="horizontal">
<!-- File menu -->
<ice:menuItem value="File" id="file" onclick="return false;">
<ice:menuItem onclick="return false;" id="open" value="Open" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/open.gif"></ice:menuItem>
<ice:menuItem id="close" value="Close" onclick="return false;"></ice:menuItem>
<ice:menuItem id="recent" value="Recent" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/recent.gif" onclick="return false;">
<ice:menuItem id="file1" value="File 1" onclick="return false;"></ice:menuItem>
<ice:menuItem id="file2" onclick="return false;" value="File 2">
<ice:menuItem id="para1" onclick="return false;" value="Para 1"></ice:menuItem>
<ice:menuItem id="para2" value="Para 2" onclick="return false;"></ice:menuItem>
<ice:menuItem id="para3" value="Para 3" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<ice:menuItem value="File 3" id="file3" onclick="return false;"></ice:menuItem>
<ice:menuItem value="File 4" id="file4" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<ice:menuItem id="save" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/save.gif" value="Save" onclick="return false;"></ice:menuItem>
<ice:menuItemSeparator />
<ice:menuItem id="print" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/print.gif" value="Print" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- Edit menu -->
<ice:menuItem value="Edit" id="edit" onclick="return false;">
<ice:menuItem id="cut" value="Cut" onclick="return false;"></ice:menuItem>
<ice:menuItem id="copy" value="Copy" onclick="return false;"></ice:menuItem>
<ice:menuItem id="paste" value="Paste" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- View menu -->
<ice:menuItem value="View" id="view" onclick="return false;">
<ice:menuItem id="zoom_in" value="Zoom In" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomin.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="zoom_out" value="Zoom Out" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomout.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="fit_in_window" value="Fit In Window" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/fitinwindow.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="actual_size" value="Actual Size" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/actualsize.gif" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- Help Menu -->
<ice:menuItem value="Help" id="help" onclick="return false;">
<ice:menuItem id="docs" value="Documentation" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/help.gif" link="http://www.icefaces.org/main/resources/documentation.iface" target="_blank" />
</ice:menuItem>
</ice:menuBar>
</ice:panelGroup>
<ice:panelGroup styleClass="clearer" />
</ice:panelGroup>
<div style="height: 1800px;width: 100%;" />
</h:body>
</html>
If someone can test this code on IE7 or IE8 with compatibility view to confirm the bugged behavior, would already help.
I do also wonder if this problem is related to the fact we do use here an IE8 version with "compatibility view" and not a standalone IE7 (does IE8 with compatibility mode send IE8 or IE7 headers to the server ?). Can anyone test with a standalone IE7 ?
Any help will be greatly appreciated.
IceFaces 3 corrected this bug, no need anymore for a workaround.
Related
I'm building an asp.net website (webforms) in Visual Studio 2017 version 15.2 (26430.16) and Microsoft .NET Framework version 4.7.03056. (targetFramework .NET = 4.5.2).
Upon creation of the solution a bootstrap.css file is created, together with the Site.master and so on.
When I edit the bootstrap.css file I can see changes happening when viewing the website on localhost. But after publishing to my host, it doesn't seem to have applied those changes to the live website.
Part of my 'Site.master' page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>CompanyX | <%: Page.Title %></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="CompanyX, ..." class="next-head" />
<meta name="author" content="CompanyX" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:title" content="CompanyX" />
<meta property="og:description" content="..." />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/Content/Site.css" type="text/css" runat = "server" />
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<%-- navbar css styling is done in the 'bootstrap.css' file --%>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<asp:Image ID="logo" runat="server" ImageUrl="~/images/logo.png" AlternateText="logo" style="width:15%; height:auto;"></asp:Image>
<span>CompanyX</span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/About">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" runat="server" href="#">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a runat="server" href="~/Product-1">Product-1</a></li>
<li><a runat="server" href="~/Product-2">Product-2</a></li>
</ul>
</li>
<li><a runat="server" href="~/Photos">Photos</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
...
</div>
</form>
</body>
A change I applied in the 'bootstrap.css' file:
.navbar-nav > li > a {
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
font-size: medium;
}
I added a margin-top: 10px; here, so my items from the navbar-collapse collapse are horizontally aligned with the logo and text from navbar-brand.
I'd expect this to work for both, localhost and published website.
I also tried adding the below code to asp:ContentPlaceHolder ID="Stylesheets" as an extra reference to the bootstrap.css file, but no luck there either.
<link rel="stylesheet" runat="server" href="/Content/bootstrap.css" type="text/css" />
Your input is much appreciated.
Below you can see the result visualized:
Update:
Actually it looks like something strange is going on, when viewing the page source code.
My code to render CSS on my Site.master:
On localhost, the source code looks like this:
On published website, the source code looks like this:
And I just realized I don't need the ContentPlaceHolder ID="Stylesheets". I've now removed it from my code, but the problem remains.
Any thoughts on why this is different?
There could be multiple reasons behind that, my guess would be these:
It could be, your browser have cached the CSS file and is
using the file from there. Try clearing the browser cache or use
Ctrl + Shift + R if using Firefox or Chrome to hard-reload the
page.
Or it could be because your visual studio is not uploading the CSS
file. Try manually replacing the file via FileZilla.
There could be a style mentioned in the head or after your specified changes, that are over writing your changes. Inspect if there are no changes in style after the desired changes are being applied.
Check, if there are some style attributes mentioned with an !important flag. If there are, this would mean it is taking precedence over your normal styles even you specify them after the desired changes.
The easy solution for me was to remove the css bundling.
I removed this line of code:
<webopt:bundlereference runat="server" path="~/Content/css" />
and also removed the Bundle.config file.
In my <head> tag I now have the below:
<link rel="stylesheet" runat="server" href="/Content/Site.css" type="text/css" />
<link rel="stylesheet" runat="server" href="/Content/bootstrap.css" type="text/css" />
I'm working with the PrimeFaces file upload button and it works as intended but my cursor is able to click it while not in the bounds of the button. This is possible specifically if the cursor is both
below the upper bound of the button
to the left of the right bound of the button.
There does appear to be some lower bound to this clickable area outside of the button but there is not a clear marker like there is for the upper and right bounds.
I am currently using PrimeFaces 6.0, and my WebLogic server is version 12.1.2.0. There are also no errors being printed to the console.
Are there errors in my xhtml that is causing it or is it related to an issue with PrimeFaces? Would it be possible to change the clickable area with CSS without changing the actual button size?
XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="/templates/main.xhtml">
<h:head></h:head>
<ui:define name="pagebody">
<h:outputScript library="javascript" name="script.js" />
<h:body>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/resources/images/ajax-loader.gif" />
</p:dialog>
<h:form id="uploadform" prependId="false"
enctype="multipart/form-data"
onkeypress="return event.keyCode != 13;">
<p:focus />
<p:outputPanel id="container">
<center>
<h2>File Upload</h2>
</center>
<br />
<center>
<font color="red"> <b><p:messages id="messages"
styleClass="error" /></b>
</font>
</center>
<center>
<p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
update="submitButton" auto="true" allowTypes="/(\.|\/)(csv|xlsx)$/" />
<p:commandButton value="Submit" id="submitButton" actionListener="#{uploadBean.submitFile}"
styleClass="ui-priority-primary" update="submitButton" disabled="#{! (uploadBean.enableSubmit)}"/>
</center>
</p:outputPanel>
</h:form>
</h:body>
</ui:define>
I have a xhtml page with two tables that are set css style:
<o:dataTable id="productTable" value="#{produkty.produkty}" var="p"
rowKey="#{p.product.id}" pageSize="10" styleClass="dataTable"
style="line-height: 15px; font-size: 12px; table-layout: fixed;">
<o:columnResizing resizeHandleWidth="10px" minColWidth="50px" />
<o:multipleRowSelection rowDatas="#{produkty.SProdukty}"
style="background: #a4aec5; color: white;" mouseSupport="false"
keyboardSupport="false" />
<!-- OPIS -->
<o:column header="Opis" id="opisCol1"
sortingExpression="#{p.product.opis}"
style="text-align: left; padding-right: 5px; padding-left: 5px; ">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<!-- <h:outputText value="#{p.product.opis}" /> -->
<o:hintLabel value="#{p.product.opis}" hintTimeout="0"
style="width: 350px; margin-right: 10px; color: black; border-color: red;" />
</o:column>
</o:dataTable>
the style used in <o:hintLabel> and <o:dataTable> tags set only when I press a button:
addBean method looks like this:
public void addBean() {
add();
produktyP.chainReaction(this);
}
which has nothing in common with the table, but it's reloading page, why onle when i press this button css styles set? In addition, I will say that the site is in tag. I use OpenFaces lib.
index.xhtml source:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://openfaces.org/">
<h:head>
<title>PIR Kreator Ofert</title>
<script src="/WEB-INF/resources/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="resources/style.css" type="text/css"/>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="2">
<h:outputLink value="index.xhtml"><h:graphicImage id="logo" alt="pir logo" url="/images/logo.png"/></h:outputLink>
<h1>Kreator Ofert</h1>
</h:panelGrid>
<o:tabbedPane>
<o:subPanel caption="Nagłówek">
<ui:include src="index_core/naglowek.xhtml" />
</o:subPanel>
<o:subPanel caption="Produkty">
<ui:include src="index_core/produkty.xhtml" />
</o:subPanel>
</o:tabbedPane>
<h:panelGrid columns="2">
Sortowanie Elementów:
<o:selectBooleanCheckbox value="#{pdf.sortContent}" />
</h:panelGrid>
<h:panelGrid columns="5">
Nazwa pliku:
<o:inputText value="#{pdf.fileName}" />
<o:commandButton id="printButton" value="Drukuj"
actionListener="#{pdf.printt}" />
<o:commandButton id="initializePDFButton" value="Reset"
action="#{pdf.initPDF}" />
<o:commandLink value="Download PDF" action="#{pdf.downloadPDF}"
target="_blank" />
</h:panelGrid>
<!-- AJAX -->
<ui:include src="ajax_core/ajax.xhtml" />
</h:form>
</h:body>
</html>
produkty.xhtml source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://openfaces.org/">
<h:panelGrid columns="2">
<h:panelGroup layout="block" id="produktMenu">
<o:dataTable id="productTable" value="#{produkty.produkty}" var="p"
rowKey="#{p.product.id}" pageSize="10" styleClass="dataTable"
>
<o:columnResizing resizeHandleWidth="10px" minColWidth="50px" />
<o:multipleRowSelection rowDatas="#{produkty.SProdukty}"
style="background: #a4aec5; color: white;" mouseSupport="false"
keyboardSupport="false" />
<o:columnReordering />
<f:facet name="columnMenu">
<o:columnMenu />
</f:facet>
<f:facet name="header">
<h:outputText value="Tabela Produktów" />
</f:facet>
<!-- SELECTION -->
<o:selectionColumn sortable="true" header="Selection"
style="width: 5%;" onclick="O$('form:addProduct').run()">
<f:facet name="header">
<o:selectAllCheckbox style="width: 10px;" />
</f:facet>
</o:selectionColumn>
<!-- KATEGORIA -->
<o:column header="Kategoria"
sortingExpression="#{p.product.kategoria}">
<f:facet name="subHeader">
<o:dropDownFieldFilter maxlength="4" customValueAllowed="false"
style="width: 40px;" />
</f:facet>
<h:outputText value="#{p.product.kategoria}" />
</o:column>
<!-- ILOSC -->
<o:column header="Ilość">
<o:spinner id="ilosc" value="#{p.ilosc}" minValue="1"
maxValue="100" onclick="O$('form:addProduct').run()"/>
</o:column>
<!-- SYMBOL -->
<o:column header="Symbol" id="symbolCol1"
sortingExpression="#{p.product.symbol}" style="width: 100px">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<h:outputText value="#{p.product.symbol}" />
</o:column>
<!-- OPIS -->
<o:column header="Opis" id="opisCol1"
sortingExpression="#{p.product.opis}"
style="text-align: left; padding-right: 5px; padding-left: 5px; ">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<!-- <h:outputText value="#{p.product.opis}" /> -->
<o:hintLabel value="#{p.product.opis}" hintTimeout="0"
style="width: 350px; margin-right: 10px; color: black; border-color: red;" />
</o:column>
<!-- CENA -->
<o:column header="Cena" id="cenaCol1"
sortingExpression="#{p.product.cena}" style="width: 55px;">
<h:outputText value="#{p.product.cena}€" />
</o:column>
<!-- PAGINATOR -->
<f:facet name="below">
<o:dataTablePaginator id="paginator" firstText="Pierwsza"
lastText="Ostatnia" nextText="Następna" previousText="Poprzednia"
pageNumberPrefix="Strona" pageCountPreposition="z" />
</f:facet>
<f:facet name="footer">
<o:commandButton value="Odśwież" type="button"
onclick="O$('form:addProduct').run()" />
</f:facet>
</o:dataTable>
</h:panelGroup>
</h:panelGrid>
</ui:composition>
I use DOCTYPE on both pages, because when only index.xhtml has it, Tomcat gives me:
HTTP Status 500 - /index.xhtml #28,51 <ui:include src="index_core/produkty.xhtml"> Invalid path : index_core/produkty.xhtml
another thing, when I want to add css file by <h:outputStylesheet library="css" name="style.css" /> or <link rel="stylesheet" href="resources/style.css" type="text/css"/> tomcat gives me java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config exception, I add jstl.jar lib to Tomcat/lib and nothing helps.
It works on IE olny, why?
I want to be able to accomplish several things with the menu, but am having a hard time trying to figure it out....
Make the font bold
Make the font size larger
Make the border color red
Align the items all the way to the right (instead of the left)
Can someone inform me how I can accomplish this?
Below, is my markup..
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage0.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="App_Themes/style0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.core.js"></script>
<script type="text/javascript" src="js/jquery.superfish.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.scripts.js"></script>
<title>Network Performance Portal</title>
<link rel="stylesheet" href="style000.css" type="text/css" media="screen" />
<style type="text/css">
div.RadMenu2
{
float: right;
}
</style>
</head>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript1.5"></script>
<asp:contentplaceholder id="head" runat="server">
</asp:contentplaceholder>
<body>
<header>
<div id="wrap">
<div class="top_corner">
</div>
<div id="main_container">
<div id="header">
<div id="logo">
<a href="http://wmsatsea.com/">
<img src="images/wmslogo.png" alt="" title="" border="0" /></a></div>
</div>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<telerik:RadMenu ID="RadMenu2" runat="server" Width="85%" Font-Bold="true" Font-Size="Large"
BorderColor="Red">
<Items>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Reports">
<Items>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Satellite Availability"
NavigateUrl="SatReport_Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Call Attempts"
NavigateUrl="CA_Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Minutes of Usage"
NavigateUrl="MinUsage_Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Dropped Call %"
NavigateUrl="Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Call Success Rate %"
NavigateUrl="Success_Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="CrewzFone Sales"
NavigateUrl="Crewzfone_Sales.aspx" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Contact Us" NavigateUrl="http://wmsatsea.com/default.aspx">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="WMS Website" NavigateUrl="http://wmsatsea.com/">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Revenue">
<Items>
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Revenue" NavigateUrl="~/Revenue/ManageSubscriptions.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="SMS Count" NavigateUrl="MobileSMS_Container.aspx" />
<telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Carrier Activity"
NavigateUrl="MoActivity_Container.aspx" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
<br />
<br />
</form>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
</header>
<footer>
<div id="footWrap">
<div id="footPanel">
<div id="footNav">
<ul>
<li></li>
<li>Home</li>
<li>
<div class="blank">
|</div>
</li>
<li>Online Support</li>
<li>
<div class="blank">
|</div>
</li>
<li>Solutions</li>
<li>
<div class="blank">
|</div>
</li>
<li>Site Map</li>
<li>
<div class="blank">
|</div>
</li>
<li>Report Requests</li>
<li>
<div class="blank">
|</div>
</li>
<li>Projects</li>
<li>
<div class="blank">
|</div>
</li>
<li>Contact Us</li>
</ul>
</div>
<div id="copyright">
<p>
© Copyright WMS. All Rights Reserved.</p>
</div>
<p>
Designed By: Software Development Team</p>
</div>
</div>
</footer>
</body>
</html>
!important
This is the most important thing you knew to do what you want with RadMenu.
The second is to set EnableEmbeddedSkins property to false.
Some links:
RadControls for ASP.NET AJAX Documentation
USING CSS WITH RADMENU
And for a quick view, you can change the Text on RadMenu by using the following tag
.RadMenu .rmItem .rmExpandDown - Only the "header" menu.
.RadMenu .rmText - All text menu
You need to override telerik's css. Use a combination of viewsource and firebug to do this the most efficiently. Also this awesome link with the css class heirarchy of the radmenu has helped me buckets in the past.
http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-file.html
I have already download and install this package to support HTML5 input type
http://support.microsoft.com/kb/2468871
The following is code in my page
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="testEmail" type="email" />
</div>
<div>
</div>
<asp:TextBox ID="testEmailAsp" runat="server" type="email"></asp:TextBox>
<asp:TextBox ID="testUrlAsp" runat="server" type="url"></asp:TextBox>
<asp:TextBox ID="textBoxTest" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
This code is generated when running in visual studion 2010
<input name="testEmailAsp" type="text" id="testEmailAsp" type="email" />
<input name="testUrlAsp" type="text" id="testUrlAsp" type="url" />
<input name="textBoxTest" type="text" id="textBoxTest" />
<input type="submit" name="Button1" value="Button" id="Button1" />
When publish to the server. it renders like this.
<input name="testEmailAsp" type="text" id="testEmailAsp" type="email" />
<input name="testUrlAsp" type="text" id="testUrlAsp" type="url" />
<input name="textBoxTest" type="text" id="textBoxTest" />
<input type="submit" name="Button1" value="Button" id="Button1" />
As you can see. it render type 2 time so the markup is incorrect and that make the input type keyboard on mobile not work.
I have to install that on the server as well, i don't know that
This may sound silly but does IE9 support HTML5 input type="email", url
http://html5test.com/