I am confused about applying CSS to some dojo elements in my Xpage.
I have a CSS style sheet with the following in it:
.formFields {
color: rgb(5, 56, 107);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 18px;
text-align: left;
width: 400px;
}
I have a sample test page with the following code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.resources>
<xp:styleSheet href="/custom.css" />
</xp:this.resources>
<xe:firebugLite id="firebugLite1" />
<xe:djTextBox id="LocNum" styleClass="formFields" value="#{document1.locNum}" />
<xp:br />
<xp:br />
<xp:inputText id="inputText1" styleClass="formFields" />
</xp:view>
When I run this and look at Firebug, I noticed that my CSS was not being applied. For dojo elements this appears to be applied:
.dijitReset {
-moz-font-feature-settings:inherit;
-moz-font-language-override:inherit;
border:0 none;
color:inherit;
font-family:inherit;
font-size:**24px;**
font-size-adjust:inherit;
font-stretch:inherit;
font-style:inherit;
font-variant:inherit;
font-weight:inherit;
line-height:normal;
margin:0;
padding:0;
}
I confirmed this by changing the font size.
I want to be able to have all my input fields look the same. Some of the fields have a blue color and some have a black color. I also want to have them look the same when in edit mode, and the same in read mode. That way the user can tell what mode they are in.
What the heck is going on here? I find CSS so darn hard at times.
Bryan
I believe your issue is less of a direct CSS problem and more a combination issue with how XPages builds out the dijit element (the xe:djTextBox) and where it applies the CSS style you've defined with the fact that you're attempting to use CSS solely from an external file. What's happening is that it is applying your formFields class, but to the root element it generates, a div. The input that the user actually types into is nested two elements in, inside of yet another div.
To account for this, I would recommend adjusting your CSS to be defined within the XPage, in a <style type="text/css> tag, which would, by nature of CSS inheriting from the "bottom up", take priority over the styles you're being given via XPages and Dojo.
Inheritance of CSS:
inline styles take precedence (style="...")
page styles (defined in a tag, like I'm describing)
external style sheets (defined with <link rel="stylesheet"...>)
You might be able to get it to apply with your externally defined styles, you may wish to try changing your definition for .formFields to .formFields, .formFields input and throwing in some !important flags to the ends of your property lines. This will make it apply to inputs underneath elements with the formFields class.
Here's an example with in-page defined styles:
Related
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
How can I use different CSS in the same page?
For example I have two primefaces header in the same page and I want to apply different CSS for them.
Is there a way to do this? When I try to add below lines inside head tags, just one of them is working.
<h:outputStylesheet library="css" name="myheader1.css" />
<h:outputStylesheet library="css" name="myheader2.css" />
CSS files:
.ui-layout-unit-header{
font-size: 20px;
border: none;
text-align: center;
background-color: buttonface !important;
}
.ui-layout-unit-header{
font-size: 10px;
border: none;
text-align: center;
background-color: buttonface !important;
}
Any idea how to resolve this problem
If you two CSS rules with the same selectors, the second one loaded in the second style sheet is the one that will be used.
This concept is known as the cascade, and described in the CSS specification:
http://www.w3.org/TR/CSS2/cascade.html#cascade
You can't , All CSS on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will work. Specificity is determined by the selector and by the order they appear in the document. This is part of the cascading.
I'm transitioning a website from plain html to ASP.Net.
I have two forms in the website frmRegister and frmLogin
I have css for the each of these like this...
form#frmRegister .floatRight input{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
font-weight: normal;
}
form#frmRegister .textRow input, form#frmRegister .textRow textarea, form#frmLogin .textRow input, form#frmLogin .textRow textarea, form#frmRegister .textRow select{
width: 90%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
}
but because asp renames the forms to aspNetform, the styles are not applied.
I tried adding aspNetform to the css but then every form gets given the same style.
I'm using master pages btw.
Don't style your CSS by ID. Use CSS classes instead.
<form id="myForm" runat="Server" class="someClass">
in css:
.someClass {background-color: blue; color:red; }
Although technically, I've never applied css to a form, so I'm not 100% sure the above will work. If I need to do that, I nest a div within the form, and apply the style to the div. So I'd change
<form id="myForm" runat="Server" class="someClass">
...
</form>
to
<form id="myForm" runat="Server" >
<div class="someClass">
...
</div>
</form>
Try giving the style based on the class name, instead of the ID.
I don't work with web forms, so there may be a better solution, but you could just address your forms via CSS classes rather than ids.
E.g., add a class frmRegister to that form tag, and then address it in CSS like this:
form.frmRegister .floatRight input{ width: 100%;
....
Have you tried the ClientID property of your controls?
Also on your css you can do something like:
form#<%=myControl.ClientID%>{
/* css in here */
}
Yes, forms represent a special element in a webforms app. Better to just define a class and apply that to your form, or even putting a div within the form and styling that.
Also, one big advantage over regular HTML is that you can stick all this in a master page. This way, you can tweak your overall page layout only in one place (the master page) and have those changes reflected on every page.
Are you embedding the styles in the pages/master page or is it in an external file? If you add the styles to the master page it will affect all of its child pages.
Here's a live demo of the issue on JS Fiddle. I have some jquery UI radio buttons, and by setting the font-family on the body element, suddenly spaces appear between the buttonset, ruining the appearance and connectivity of the buttons. They look like this:
Update: the bug is now happening in all browsers, though slightly different in each browser. In all cases the font-family attribute is the problem.
I included some minimum CSS/HTML from my site that causes the issue, the Themeroller CSS for my site. You can mess with the fiddle and you'll see the gaps disappear when the font-family tag is removed from the body tag. Note it doesn't have to be a body tag, it happens if you make it a div or anything else that applies to the radio buttons.
This one bit of CSS is enough to break it:
body{
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Is there any way I can specify the font family for the parent elements without the jquery UI buttons breaking? Interestingly this font-family isn't being used, as the Jquery UI theme's CSS sets the radio button's font as well.
I couldn't tell you why it does it, but if you are happy just to add CSS code that fixes it then use this:
#radio input, #radio label {
float: left;
margin-right: 0px;
}
Edit
In response to your comment below - try adding !important to margin-right; it looks like it is being over-ridden.
#radio input, #radio label {
float: left;
margin-right: 0px !important;
}
JS Fiddle - http://jsfiddle.net/kwpGn/7/
What is the usefulness of these 2 things in CSS reset?
What is the problem in resizing of input elements in IE and in which version?
and if legend color doesn't inherit in IE then how it can be solved adding color:#000;
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
The first rule actually doesn't apply on IE only, but on all webbrowsers. Normally you would like to define a global font in the body:
body {
font: 1.1em verdana, arial, sans-serif;
}
But this doesn't get applied (inherited) on the form controls in all webbrowsers. That rule would then apply (only) the font size on them as well. One way is to set the font to inherit on those elements:
input, select, textarea {
font: inherit;
}
But that doesn't work in IE6/7. Another way is to just explicitly include the elements in the rule:
body, input, select, textarea {
font: 1.1em verdana, arial, sans-serif;
}
That only the font-size is been set is probably because the YUI guys would like to keep the form controls their own browser-default font family (which is sans-serif for input and select and is monospace for textarea). The 100% is been used because IE6/7 doesn't support inherit.
As to the second rule: I am not sure what they meant here. I did a little test in IE6/7. The legend just inherits the color from its parent element. Maybe the actual problem lies somewhere else?