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>
Related
I create page and use data Grid there:
<?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:p="http://primefaces.org/ui">
<h:head>
<h:link rel="stylesheet" type="text/css" href="mystyle.css"></h:link>
<title>Prototype</title>
</h:head>
<h:body>
<h3>Dashboard prototype</h3>
<h:form>
<p:dataGrid id = "grid"
value="#{dashboardView.users}"
var="user"
columns="#{dashboardView.columns}"
styleClass="gridClass">
<p:column styleClass="gridClass">
<p:panel header="#{user.user.displayName}"
styleClass="gridClass">
<p:dataGrid value="#{user.issues}"
var="issue"
columns="1">
<p:panel header="#{issue.key}">
"#{issue.summary}"
</p:panel>
</p:dataGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:commandButton value="rrr"
actionListener="#{dashboardView.button}"
update="grid">
</p:commandButton>
</h:form>
</h:body>
</html>
And CSS:
.gridClass {
vertical-align: top;
text-align: start;
}
Panels inside First DataGrid alligns on center, but I want it to allign on top.
How can I do it?
Thanks!
You can solve by using jquery selector, which is shown below.
<script>
$(document).ready(function() {
$(".panelOnTopClass").parent().css("vertical-align", "top");
$(".panelOnTopClass").parent().css("height", "300px");
});
</script>
<h:form id="form">
<p:dataGrid var="car" value="#{dataGridView.cars}" columns="3"
rows="12" paginator="true" id="cars"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16"
styleClass="gridClass">
<f:facet name="header">
Cars for Sale
</f:facet>
<p:panel header="#{car.id}" styleClass="panelOnTopClass">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage name="demo/images/car/#{car.brand}.gif"/>
<h:outputText value="#{car.year}" />
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 8 years ago.
I'm using facelets and I have the following layout page:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<title><ui:insert name="title" /></title>
<link href="../css/cssmenu/styles.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<div id="layout">
<table>
<tr>
<td height="500" valign="top">
<div id="menu">
<ui:include src="menu.xhtml" />
</div>
</td>
<td>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
</td>
</tr>
</table>
</div>
</h:body>
</html>
Also my menu.xhtml page is the following:
<!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:p="http://primefaces.org/ui">
<h:body>
<h:form id="menuForm">
<div id="menuLateral">
<p:growl id="messages" autoUpdate="true" showDetail="true" />
<p:panelMenu style="width:200px" id="panelMenu">
<p:submenu label="Incidentes">
<p:menuitem value="#{menuController.test}" action="#{menuController.save}"
ajax="true" update="messages"
icon="ui-icon-disk" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
</p:submenu>
<p:separator />
<p:submenu label="Navigations">
<p:submenu label="Links" icon="ui-icon-extlink">
<p:submenu label="PrimeFaces" icon="ui-icon-heart">
<p:menuitem value="Home" url="http://www.primefaces.org"
icon="ui-icon-home" />
<p:menuitem value="Docs"
url="http://www.primefaces.org/documentation.html"
icon="ui-icon-document" />
<p:menuitem value="Download"
url="http://www.primefaces.org/downloads.html"
icon="ui-icon-arrowthick-1-s" />
<p:menuitem value="Support"
url="http://www.primefaces.org/support.html"
icon="ui-icon-wrench" />
</p:submenu>
</p:submenu>
<p:menuitem value="Mobile" icon="ui-icon-signal" />
</p:submenu>
</p:panelMenu>
</div>
</h:form>
</h:body>
</html>
What I want is to make my primefaces menu to look like this one:
http://cssmenumaker.com/builder/1442641 (or anyone actually, its just an example)
However im not sure what my css stylesheet should contain or what to do to accomplish it. I will deeply appreciate your suggestions.
Override Primefaces 4.0 CSS
Step 1 : You just override css file in primefaces 4.0
<h:outputStylesheet href="../css/layout.css" />
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?
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.
For some reason none of these DIVs render disabled. Oddly enough, when I set Enabled="False" on the .NET Panel, then it renders the Panel as a DIV with disabled="disabled", which works great.
Here's my doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="Div1" disabled="disabled">
<input type="text" value="blah" />
</div>
<div id="disableMe" disabled="disabled">
<input type="text" value="blah" />
<asp:Panel runat="server">
<asp:RadioButtonList runat="server">
<asp:ListItem Text="Item1" Selected="True" />
<asp:ListItem Text="Item2" />
</asp:RadioButtonList>
<asp:TextBox runat="server" Text="Hello World" />
</asp:Panel>
</div>
Disabled is not an attribute for a DIV, but an attribute for every form element (like INPUT, SELECT, TEXTAREA).
Just add the disabled attribute to ever form element within the DIV.
I guess the disabled="disabled" gets parsed server side and applies that status to children fields (runat="server"), because in html there's no disabled="disabled" for <div> elements.
You basically want to use CSS display: none here.
<div style="display: none;">
A <div> is a simple HTML element and get printed to HTTP response as-is, it's not some server side component which generates some HTML (like as those other ASP.NET components are doing).