I have a have an asp:Menu and i am using css classes to format this menu.
<asp:Menu ID="MenuMain" runat="server" DataSourceID="SiteMapDataSource"
Orientation="Horizontal" RenderingMode="List" SkinID="None"
IncludeStyleBlock="false" StaticDisplayLevels="1">
<StaticMenuStyle CssClass="nav" />
<StaticSelectedStyle CssClass="active" />
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="level1" />
<asp:SubMenuStyle CssClass="level2" />
</LevelSubMenuStyles>
However asp.net dynamically adds the inline styles and divs that are generated by javascript associated to the menu.
Is there anyway to prevent this ?
Add your own css class with different names and associate them with this in CssClass
<StaticMenuStyle CssClass="nav" />
<StaticSelectedStyle CssClass="active" />
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="level1" />
<asp:SubMenuStyle CssClass="level2" />
</LevelSubMenuStyles>
Hope it helps.
Don't forget to upvote it if it solves you problem.
Thanks.. :)
Related
I have designed my CQ5 dialog as given in the following image. I have to disable my checkboxes options as highlighted in the image.
And dialog.xml is like
<stewartOwned jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Stewart Owned"
inputValue="false" name="./stewartOwned" type="checkbox"
xtype="selection" layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="stewartOwned" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</stewartOwned>
<independent jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Independent" inputValue="false"
name="./independent" type="checkbox" xtype="selection"
layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="I" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</independent>
I have tried following solution to disable through id but it is not viable as id is auto generate and you never know what id will be generated in the next session.
listeners jcr:primaryType="nt:unstructured"
loadcontent="function(dialog) {
CQ.Ext.getDom('ext-comp-1568').disabled = 'disabled';
CQ.Ext.getDom('ext-comp-1573').disabled = 'disabled';
}" />
Can someone please suggest how I disable highlighted checkboxes in dialog.xml ?
After a lot of research and reading CQ5 documentation, I managed to find out following solution.
var nameField =
dialog.getField('./name').getEl().child('input[value*=ShowInAdvanced]').id;
CQ.Ext.getDom(nameField).disabled = 'disabled';
i'm using jqgrid asp.net component .how can i change a filed width and height (text box or combo) in add and edit dialog boxes?
Thank you
At the last im found it
1 you need to specify edittype attribute
2 after that specify editfiled attributes tag
for text area
<trirand:JQGridColumn DataField="Remarks" HeaderText="Remarks" Editable="true" EditType="TextArea">
<Formatter>
<trirand:CustomFormatter FormatFunction="formatRating" UnFormatFunction="unformatRating" />
</Formatter>
<EditFieldAttributes>
<trirand:JQGridEditFieldAttribute Name="cols" Value="80" />
<trirand:JQGridEditFieldAttribute Name="rows" Value="6" />
</EditFieldAttributes>
</trirand:JQGridColumn>
for text box
<trirand:JQGridColumn DataField="Design" HeaderText="Design" Editable="true" EditDialogFieldSuffix=" (MAX - 10)">
<Formatter>
<trirand:CustomFormatter FormatFunction="formatRating" UnFormatFunction="unformatRating" />
</Formatter>
<EditFieldAttributes>
<trirand:JQGridEditFieldAttribute Name="size" Value="2" />
</EditFieldAttributes>
</trirand:JQGridColumn>
I have a regular Navigation menu in my site.master file of my ASP.NET project. I keep my application in server, however time to time when I start the application, or do a postback, my navigation menu like it is aligned vertically for a few seconds and when page loads completely, it is again horizontal.
How can I solve that issue ?
Not necessary but below are my codes (css & navigation menu):
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
And the menu
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
<asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
<asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
</Items>
</asp:Menu>
You can hide it immediately and once the whole page is loaded you should show it again. So, add a property Visible="false" to the asp:Menu element, then add a simple script to the page to show it when the page is fully loaded:
<script type='javascript'>
window.onload = function(){
document.getElementById("NavigationMenuID").style.display = "block";
}
</script>
final snippet:
<asp:Menu ID="NavigationMenu" Visible="false" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
<asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
<asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
</Items>
</asp:Menu>
<script type='javascript'>
window.onload = function(){
document.getElementById("NavigationMenuID").style.display = "block";
}
</script>
This is called a FOUC or "Flash of unstyled content". Typically this happens when scripts are called on a web page after the DOM has loaded. If you have a javascript or some sort of script adding classes/IDs to your menu, you will get a FOUC until the classes have been added. To avoid this, either target the menu without using the dynamically generated classes or add the classes manually and overwrite them with your script.
One other thing to note, CSS loads before rendering occurs. So if you see a FOUC, you are either loading the CSS asynchronously or updating your selectors after rendering has began.
Hope this helps!
First thing while loading the page could be :
$(document).ready(function(){
// First line in the script.
$('#NavigationMenuClientID').hide();
//Other page scripts..
.
.
.
.
.
.
// check navigation menu styles / scripts are loaded.
$('#NavigationMenuClientID').show();
// else use SetTimeout(function(){$('#NavigationMenuClientID').hide();},10);
});
put your CSS in the head
put your JavaScript links just before the end <body> tag
This button causes a lot of problems for my client, as it always uses a predefined Schema. I can't find a way to remove this button with my Editor config. I have done this with other buttons, but these buttons are implemented in some sort of sub-group.
On my personal sandbox machine, I tried removing the commented out control in the extract of the ../WebUI/Editors/CME/Controls/Toolbars/Tabs/CreateRibbonPage.ascx file shown below:
<c:RibbonSplitButton runat="server" CommandName="NewComponent"
Title="<%$ Resources: Tridion.Web.UI.Strings, NewComponent %>"
Label="<%$ Resources: Tridion.Web.UI.Strings, NewComponent %>"
ID="NewComponentBtn1">
<c:RibbonContextMenuItem runat="server" ID="NewComponentCMI2"
Command="NewComponent"
Title="<%$ Resources: Tridion.Web.UI.Strings, NewComponent %>"
Label="<%$ Resources: Tridion.Web.UI.Strings, NewComponent %>" />
<c:RibbonContextMenuItem runat="server" ID="NewMultimediaComponentCMI2"
Command="NewMultimediaComponent"
Title="<%$ Resources: Tridion.Web.UI.Strings, NewMultimediaComponent %>"
Label="<%$ Resources: Tridion.Web.UI.Strings, NewMultimediaComponent %>" />
<!--
<c:RibbonUploadContextMenuItem runat="server"
ID="NewBasicMultimediaComponentCMI2" Command="NewBasicMultimediaComponent"
Title="<%$ Resources: Tridion.Web.UI.Strings, NewBasicMultimediaComponent %>"
Label="<%$ Resources: Tridion.Web.UI.Strings, NewBasicMultimediaComponent %>" />
-->
</c:RibbonSplitButton>
This seems to have the desired result, but I imagine that this will probably invalidate our support agreement if I did this in a customer environment. Is this possible to do in a supported way, or do I have to hack the UI files like this to achieve my goal?
One of the solutions is to create extension for the NewBasicMultimediaComponent command, which extends isAvailable and isEnabled methods and returns false for them. In this case "Upload MM Component" still will be present as an option for "New Component" button, but it will be disabled.
I've used css to hide the display of ribbon items before. Purely because I couldn't find the appropriate solution.
I'm adding this answer because I needed to do something similar with a complete ribbon toolbar.
I needed to remove the complete ribbon toolbar "Create" in order to add a simpler version of it and it seems you can do the removal part by creating a new extension and use this in your extensions config:
<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge" xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration" xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions" xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu" xmlns:edt="http://www.sdltridion.com/2009/GUI/Configuration/Merge">
<resources>
<cfg:groups />
</resources>
<definitionfiles />
<extensions>
<ext:editorextensions>
<ext:editorextension target="CME">
<ext:editurls />
<ext:listdefinitions />
<ext:itemicons />
<ext:taskbars />
<ext:commands />
<ext:commandextensions />
<ext:contextmenus />
<ext:lists />
<ext:tabpages>
</ext:tabpages>
<ext:toolbars>
</ext:toolbars>
<ext:ribbontoolbars>
<ext:remove>
<ext:extension id="CreatePage">
<ext:apply>
<ext:view name="DashboardView">
<ext:control id="DashboardToolbar" />
</ext:view>
</ext:apply>
</ext:extension>
</ext:remove>
</ext:ribbontoolbars>
<ext:extendedareas />
</ext:editorextension>
</ext:editorextensions>
<ext:dataextenders />
</extensions>
<commands />
<contextmenus />
<localization />
<settings>
<dependencies />
<defaultpage />
<editurls />
<listdefinitions />
<theme>
<path>/Themes/</path>
</theme>
<customconfiguration />
</settings>
</Configuration>
To make this work for buttons you probably can do the same thing (haven't tested this), by providing the button id in the ext:extension id attribute.
In my XML, it's possible for an apostrophe to appear in a node's value:
<Root>
<Sections>
<SectionA>
<Heading>Title</Heading>
<Description>This is section 'A'</Description>
</SectionA>
</Sections>
</Root>
If I have controls bound to this XML:
<asp:FormView ID="myFormView" runat="server" DataSourceID="myXmlDataSource">
<ItemTemplate>
<div>
HTML Element:
<input type="text" value='<%# XPath("text()") %>' />
</div>
<div>
Server Control:
<asp:TextBox id="myTextBox" runat="server" value='<%# XPath("text()") %>' />
</div>
</ItemTemplate>
</asp:FormView>
<asp:XmlDataSource ID="myXmlDataSource" runat="server" XPath="Root/Sections/SectionA" />
I've noticed that the text is correctly displayed in the asp:TextBox but not in the INPUT element. I'm assuming that it's because server controls correctly escape the apostrophe. To work around this, I tried changing the Description node in the XML to the following:
<Description>This is section 'A'</Description>
Again, this displayed correctly in the asp:TextBox, but not in the INPUT element.
My next attempt was to wrap the node's value in a CDATA:
<Description><![CDATA[This is section 'A']]></Description>
Finally it was displaying correctly in the INPUT element, but now the asp:TextBox displayed the two "& # 3 9 ;". I've even tried "& a p o s ;" but the result is the same.
What is the best approach for the use of apostrophes in XML where the value can be displayed in either a server control or HTML element?
Here you have single quotes surrounding the value argument for the html element:
<input type="text" value='<%# XPath("text()") %>' />
This renders:
value='This is section 'A''
Instead use double quotes:
<input type="text" value="<%# XPath("text()") %>" />
Which renders:
<input type="text" value="This is section 'A'" />
Use ' instead. It is one of the 5 permitted entities in XML.
So your code would look like:
<Description>This is section 'A'</Description>