Issue with rendering RF components in DIV container

[locutusut]

Hello,

I have an issue where I'm rendering RF components inside a DIV container hierarchy. I'm not a CSS expert so bare with me, but to see what's going on you can see a screenshot http://picbite.com/13771pmfoev/.

My code is in XHTML as follows:

 <ui:define name="content">
 </script>
 </f:verbatim>
 <div class="section">
 <ui:fragment id="messages">
 <div id="messagesInsertionPoint"><h:messages
 errorClass="errors" /></div>
 </ui:fragment> <a4j:form id="pcrForm">
 <fieldset>
 <div class="field">
 <div class="label"><h:outputLabel for="ChangeType">Change Type:</h:outputLabel>
 </div>
 <div class="picklist"><rich:pickList styleClass="picklist">
 <f:selectItem id="item1" itemLabel="Assembly Process" itemValue="1" />
 <f:selectItem id="item2" itemLabel="Assembly Site" itemValue="2" />
 <f:selectItem id="item3" itemLabel="Business" itemValue="3" />
 <f:selectItem id="item4" itemLabel="Electrical Design" itemValue="4" />
 <f:selectItem id="item5" itemLabel="Mechanical Design" itemValue="5" />
 <f:selectItem id="item6" itemLabel="Package Marketing" itemValue="6" />
 <f:selectItem id="item7" itemLabel="Packaging Materials"
 itemValue="7" />
 <f:selectItem id="item8" itemLabel="Packing, Labeling, Shipping"
 itemValue="8" />
 <f:selectItem id="item9" itemLabel="Second Foundry Source"
 itemValue="9" />
 <f:selectItem id="item10" itemLabel="Test Process" itemValue="10" />
 <f:selectItem id="item11" itemLabel="Test Site" itemValue="11" />
 <f:selectItem id="item12" itemLabel="Wafer Fabrication Process"
 itemValue="12" />
 <f:selectItem id="item13" itemLabel="Wafer Fabrication Site"
 itemValue="13" />
 <f:selectItem id="item14" itemLabel="Wafer Probe Site"
 itemValue="14" />
 </rich:pickList></div>
 </div>
 <br />
 <div class="section"><rich:tabPanel switchType="client"
 width="100%">
 <rich:tab id="ChangeDetails" label="Additional Information">
 <div class="field">
 <div class="label"><h:outputLabel for="ChangeDescription">ChangeDescription:</h:outputLabel></div>
 <div class="input"><h:inputTextarea id="ChangeDescription"
 value="#{pcnRequest.description}" style="width: 100%"></h:inputTextarea>
 </div>
 </div>

And my CSS is as follows:

 .section {
 text-align: left;
 width: 505px;
 float: left;
 margin-bottom: 5px;
 }

 .field {
 float:left;
 }


 .field .label {
 float: left;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-right: 5px;
 font-weight: bold;
 width: 150px;
 text-align: right;
 }

 .field .input {
 float: left;
 width: 250px;
 text-align: left;
 }

 .field .output {
 float: left;
 width: 250px;
 padding-top: 5px;
 text-align: left;
 }

 .field .picklist {
 float: left;
 width: 250px;
 text-align: left;
 }

Do you know how I could get the RF components to not inherit the CSS from the container? As soon as I move them outside the container, they render fine.

TIA!
Lou

[sergeysmirnov]

looks like I search for the problem not in the place where there are.
Do you have any global selector in your css?

[locutusut]

"SergeySmirnov" wrote:
looks like I search for the problem not in the place where there are.
Do you have any global selector in your css?

Yes, I do (see below). Is there a certain style I need to override at the RF component level? Note, this CSS was provided to me but I could override if need be.

Thanks...

/* TYPOGRAPHY */
 body {
 text-align: left;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 76%;
 line-height: 1em;

 color: #333;
 }
 div {
 font-size: 1em;
 }
 img {
 border: 0;
 }

/* LINKS */
 a,
 a:link,
 a:active {
 text-decoration: underline;

 color: blue;
 background-color: white;
 }
 a:visited {
 color: purple;
 background-color: transparent;
 }
 a:hover {
 text-decoration: none;

 color: white;
 background-color: black;
 }
/* END LINKS */

/* HEADINGS */
 h1 {
 margin: 0 0 0.5em 0;
 padding: 0;

 font-size: 2em;
 line-height: 1.5em;

 color: black;
 }
 h2 {
 margin: 0 0 0.5em 0;
 padding: 0;

 font-size: 1.5em;
 line-height: 1.5em;

 color: black;
 }
 h3 {
 margin: 0 0 0.5em 0;
 padding:0;

 font-size: 1.3em;
 line-height: 1.3em;

 color: black;
 }
 h4 {
 margin: 0 0 0.25em 0;
 padding: 0;

 font-size: 1.2em;
 line-height: 1.3em;

 color: black;
 }
 h5 {
 margin: 0 0 0.25em 0;
 padding: 0;

 font-size: 1.1em;
 line-height: 1.3em;

 color: black;
 }
 h6 {
 margin: 0 0 0.25em 0;
 padding: 0;

 font-size: 1em;
 line-height: 1.3em;

 color: black;
 }
/* END HEADINGS */

/* TEXT */
 p {
 margin: 0 0 1.5em 0;
 padding: 0;

 font-size: 1em;
 line-height:1.4em;
 }
 blockquote {
 margin-left: 10px;

 border-left: 10px solid #ddd;
 }
 pre {
 font-family: monospace;
 font-size: 1.0em;
 }
 strong, b {
 font-weight: bold;
 }
 em, i {
 font-style:italic;
 }
 code {
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
 white-space: pre;
 }
/* END TEXT */

/* LISTS */
 ul {
 margin: 0 0 1.5em 0;
 padding: 0;

 line-height:1.4em;
 }
 ul li {
 margin: 0 0 0.25em 30px;
 padding: 0;
 }
 ol {
 margin: 0 0 1.5em 0;
 padding: 0;

 font-size: 1.0em;
 line-height: 1.4em;
 }
 ol li {
 margin: 0 0 0.25em 30px;
 padding: 0;

 font-size: 1.0em;
 }
 dl {
 margin: 0 0 1.5em 0;
 padding: 0;

 line-height: 1.4em;
 }
 dl dt {
 margin: 0.25em 0 0.25em 0;
 padding: 0;

 font-weight: bold;
 }
 dl dd {
 margin: 0 0 0 30px;
 padding: 0;
 }
/* END LISTS */


/* TABLE */
 table {
 margin: 0 0 1.5em 0;
 padding: 0;

 font-size: 1em;
 }
 table caption {
 margin: 0;
 padding: 0 0 1.5em 0;

 font-weight: bold;
 }
 th {
 font-weight: bold;
 text-align: left;
 }
 td {
 font-size: 1em;
 }
/* END TABLE */

 hr {
 display: none;
 }
 div.hr {
 height: 1px;

 margin: 1.5em 10px;

 border-bottom: 1px dotted black;
 }

/* END TYPOGRAPHY */
/* FORM ELEMENTS */
 form {
 margin:0;
 padding:0;
 }
 form div,
 form p {
 margin: 0 0 1em 0;
 padding: 0;

 font-size: 1em;
 }
 label {
 font-weight: bold;
 }
 fieldset {
 padding: 5px 10px;
 margin: 0 0 1.5em 0;

 border: 1px solid #eee;
 }
 fieldset legend {
 margin: 0 0 0 0px;
 padding: 0;

 font-size: 1.1em;
 font-weight: bold;

 color: #666;
 background-color: white;
 }
 * html fieldset legend {
 margin: 0 0 10px -10px;
 }
 fieldset ul {
 margin: 0 0 1.5em 0;
 padding: 0;

 list-style: none;
 }
 fieldset ul li {
 margin: 0 0 0.5em 0;
 padding: 0;

 list-style: none;
 }
 input, select, textarea {
 margin: 0;
 padding: 2px;

 font-size: 1em;
 font-family: arial, helvetica, verdana, sans-serif;
 }

 input, select {
 vertical-align: middle;
 }
 textarea {
 width: 200px;
 height: 8em;
 }

 input.check {
 width: auto;
 height: auto;

 margin: 0;

 border: none;
 }
 input.radio {
 width: auto;

 height: auto;
 margin: 0;

 border: none;
 }
 input.file {
 width: 250px;
 height: auto;
 }
 input.readonly {
 background-color: transparent;
 border: none;
 }
 input.button {
 width: 10em;

 background-color: #ddd;
 border: 1px solid black;
 }
 input.image {
 width: auto;
 height: auto;

 border: none;
 }

 form div.submit {
 margin: 1em 0;
 }
 form div.submit input {
 width: 15em;
 height: 2em;
 }
/* END FORM ELEMENTS */
/* NAV BAR AT THE TOP AND ONE COLUMN OF CONTENT */
 div#content {
 position: relative;
 width: 701px;

 margin: 0 auto 20px auto;
 padding: 0;

 text-align: left;
 }
 div#main {
 width: 100%;
 }
 div#local {
 width: 100%;
 }
 div#sub {
 width: 100%;
 }
 div#nav {
 position: absolute;
 top: -15px;
 left: 0;
 width: 100%;

 text-align: left;
 }
/* END CONTENT */
/* SITE SPECIFIC LAYOUT */
 body {
 margin: 0;
 padding: 0;

 text-align: center;

 background: white;
 }
 div#page {
 width: 780px;

 margin: 0 auto;
 padding: 0;

 text-align: center;

 background: white;
 }

 /* HEADER */
 div#header {
 margin: 0 0 5em 0;
 padding: 40px 20px;

 color: white;
 background: black;

 text-align: left;
 }
 div#branding {
 float: left;
 width: 40%;

 margin: 0;
 padding: 10px 0 10px 20px;

 text-align: left;
 }
 div#search {
 float: right;
 width: 49%;

 margin: 0;
 padding: 16px 20px 0 0;

 text-align: right;
 }
 /* END HEADER */


 /* CONTENT */
 div#content {

 }

 /* MAIN */
 div#main {

 }
 /* END MAIN */

 /* SUB */
 div#sub {

 }
 /* END SUB */

 /* END CONTENT */


 /* FOOTER */
 div#footer {
 color: white;
 background-color: black;
 }
 div#footer p {
 margin: 0;
 padding: 15px;

 font-size: 0.8em;
 }
 /* END FOOTER */
/* END LAYOUT */


/* UL.SUBNAV */
 ul.subnav {
 margin: 0;
 padding: 0;

 font-size: 0.8em;
 list-style: none;
 }
 ul.subnav li {
 margin: 0 0 1em 0;
 padding: 0;

 list-style: none;
 }
 ul.subnav li a,
 ul.subnav li a:link,
 ul.subnav li a:visited,
 ul.subnav li a:active {
 text-decoration: none;
 font-weight: bold;

 color: black;
 }
 ul.subnav li a:hover {
 text-decoration: underline;
 }
 ul.subnav li strong {
 padding: 0 0 0 12px;

 background: url("../i/subnav-highlight.gif") left top no-repeat transparent;
 }
 ul.subnav li strong a,
 ul.subnav li strong a:link,
 ul.subnav li strong a:visited,
 ul.subnav li strong a:active {
 color: white;
 background-color: black;
 }
/* END UL.SUBNAV */

[ilya_shaikovsky]

so - there is nothing about RF - jsut check with firebug which selectors affects our components.

[locutusut]

Thanks for the tip. The issue is that margin is not set to 0px in the RichFaces components, namely, .rich-list-picklist-button,.rich-list-picklist-button-disabled, and .rich-list-picklist-button-press, and so it is inheriting the margin setting from my container.

Wouldn't it be reasonable to have this set in the components so the container can't override it?

[sergeysmirnov]

Actually, we have tones of opposite requests. People asks to make as minimum override as possible.
If you can avoid the global rule settings, you can add the richfaces classes and reset the setting there. Like .rich-list-picklist-button {margin:0}
Sometimes, it requires more specific rules, such as
"div .rich-list-picklist-button" or "div#content .rich-list-picklist-button". It depends of how strong your rules are.
In general, regardless we can do on the component level, you always have a chance to override it specially or occasionally on the application level. It is just a real css world.
As I see you have a global setting for tables. Some of RichFaces components use it. So, be prepared for troubles.

[locutusut]

Ok, thanks for the feedback. I agree there's probably a good number you'd want to override, but it seems like others, like margin, image, color, etc., seem fundamental to the consistent look of the control and then, if need be, you can control them through skinning.

Funny, I pull the table global setting and that caused the tab panel to mess up. I guess I have a bit more fun with firebug. :)