I am a front-end web developer currently working on a project that is using RichFaces. One of the components being used is a text-editor as shown in the code block below:
<rich:editor viewMode="html" styleClass="text-editor-basic" value="#{advAdditionalPagesBean.cssHTMLCode}" id="cssHTMLCodeEditor" theme="advanced">
<f:param name="theme_advanced_buttons1"
value="bold,italic,underline,cut,copy,paste,pasteword,|,forecolor,backcolor,|,link,unlink" />
<f:param name="theme_advanced_toolbar_location" value="top" />
<f:param name="theme_advanced_toolbar_align" value="left" />
</rich:editor>
The issue I am having is with IE8. For some reason the forecolor and backcolor components are repeating vertically, which does not happen with IE7, Firefox, or Chrome. See screenshot below:
How is this caused and how can I solve it?
Related
http://jsfiddle.net/4LXkE/
The code:
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field.
I found the following question which is close, but doesn't give a full answer to my specific question:
override css for html5 form validation/required popup
In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.
While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.
Any help turning these off would be much appreciated, thanks!
IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.
Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.
How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.
I am using the tab view of primefaces. I am facing two issues in it.
1) In IE i am seeing the tabs vertically instead of horizontally. But in firefox it works.
FireFox :
Internet EXplorer :
SO which class to override to have tabs in horizontal view.
2) And as you can see the color of unselected tab is different in firefox and IE. I also need to override the style class of unselected tab and selected tab( which i tried to do and i was quite succesful in firefox but in IE .. it doesn't works :(
My code is :
<p:tabView value="#{bean.myDTO}" var="category" id = "tabView" styleClass="TabbedPanelsTabGroup" dynamic="true" onTabChange="handleTabChange(index)">
<p:ajax event="tabChange" listener="#{bean.onTabChange}" />
<p:tab id = "tab" title = "#{category.category}" titleStyleClass="TabbedPanelsTab TabbedPanelsTabSelected TabbedPanelsContentGroup">
---------Some content------
</p:tab>
</p:tabview>
Kindly help.
You don't need to correct anything with especific CSS for IE in this case.
Just make your page compatible with older IE version adding this to the header:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I'm adding this using a Servlet Filter, but there are other ways to do this.
And don't forget the !DOCTYPE ...
...a very old question, but I remember all the headaches I had with this problem some time ago
I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?
i got stuck in an issue i.e. i wrote following css for showing page breaks in my html but i am facing the problem that it works fine in the Internet explorer but not working in firefox and chrome below is the inline css i applied
<br style="page-break-after: always;">
below is my HTML code
<asp:Panel ID="pnlHide" runat="server" Visible="false">
<br style="page-break-after: always;">
</asp:Panel>
nb:above line is in asp:panel control of asp.net which renders as DIV in html
any suggestions to change the css are welcome. I will wonder if anybody could plz help me.
If you have any floats, remove them from the css while printing, floats may be the issue and page-break may not be the issue at all.