10 Replies Latest reply on Apr 30, 2008 7:04 AM by Ilya Shaikovsky

    dataTable messed CSS

    Paolo Russian Newbie

      Hello, I'm trying to implement a datatable in my application, as described in the exadel livedemo sourcecodes.
      The table with the scroller is displayed correctly, while the sortable one mounts with a mistake in the css ("sortDiv" css element in a runtime generated [randomnumber] css file).
      Happens that the column headers are placed one ontop the other and got a this "sortDiv" div background as a white rectangle covering up everthing on the table. The only way to display some text is either to disable css (with a mozilla plugin) and you see the table with the data inside, or enlarging alot the font size so that the scrollbars pops out and you can scroll and see a tiny part of the rows behind that white div.

      It happens also that if I remove the column headers (just the outputtext, leaving "") the table gets displayed correctly, but obviously without the column headers, and you cannot make any sorting this way.

      here is my code. Thanks in advance for any clues.

      
      
      <div xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:phi="http://phi/tags"
       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
      
      
       <a4j:form id="tablesearch_result" >
      
      <h:panelGroup id="DataGrid_1207732054453_body" styleClass="DataGrid_1207732054453" >
      
      
       <rich:dataTable
      
       var="Patient_PRPA_MT201301UV02"
       value="#{Patient_PRPA_MT201301UV02_LIST}"
      
       width="300px" columnClasses="center"
       rows="25">
      
       <f:facet name="header">
       <h:outputText value="Sortable datagrid"/>
       </f:facet>
      
       <rich:column sortBy="#{RimBean.getRimValue('Patient_PRPA_MT201301UV02.player[classCode=PSN,determinerCode=INSTANCE].name.GIV',Patient_PRPA_MT201301UV02)}">
       <f:facet name="header">
       <h:outputText value="Column one"/>
       </f:facet>
       <h:outputText value="#{RimBean.getRimValue('Patient_PRPA_MT201301UV02.player[classCode=PSN,determinerCode=INSTANCE].name.GIV',Patient_PRPA_MT201301UV02)}"/>
       </rich:column>
      
      
      
       </rich:dataTable>
      
      
      
       </h:panelGroup>
      
      
      
      </a4j:form>
      
      
      
      
      
      
      
      </div>
      
      


      p.s. changing a4j:form with h:form, or removing the panelgroup does not make any difference.

        • 1. Re: dataTable messed CSS
          Ilya Shaikovsky Master

          please share the screen using http://picbite.com/.

          What RF version you've using?

          • 2. Re: dataTable messed CSS
            Paolo Russian Newbie

            Thanks for your attention, here's a screenshot on how our sortable datagrid appears: [img]http://picbite.com/img/12137xdweof.jpg[/img]

            since we're developing a dreamweaver-like webappl. designer we moved on richfaces but we're quite stuck here on datagrid generation. We successfully generate paginated datagrids, but we need also sortable ones. Thank in advance.

            here's again a simple datagrid we're trying to make appear

            <rich:dataTable
             id="DataGrid_1207732054453"
             var="Patient_PRPA_MT201301UV02"
             value="#{Patient_PRPA_MT201301UV02_LIST}"
             width="300px"
             rows="55"
             columnClasses="center"
             >
            
             <f:facet name="header">
             <h:outputText value="Datagrid Sortable Example"/>
             </f:facet>
            
             <rich:column sortBy="#{RimBean.getRimValue('Patient_PRPA_MT201301UV02.player[classCode=PSN,determinerCode=INSTANCE].name.GIV',Patient_PRPA_MT201301UV02)}" style="width: 50%;">
             <f:facet name="header" >
             <h:outputText value="#{label.DataGridColumn_1207732174078}" />
             </f:facet>
             <h:outputText value="#{RimBean.getRimValue('Patient_PRPA_MT201301UV02.player[classCode=PSN,determinerCode=INSTANCE].name.GIV',Patient_PRPA_MT201301UV02)}"/>
             </rich:column>
            </rich:dataTable>
            


            our designer/runtime environment is jboss with seam and facelets

            • 3. Re: dataTable messed CSS
              Paolo Russian Newbie

              and using the last RF version along jboss seam and facelets. too bad we're currently forced to rollback our code emitter and runtime env. to previous rf releases (not as cool as the latest, but working well for our purpose) until I'll manage to workaround this issue. Any clue on what can be my problem? What's that "sortDiv" css entry thing? Perhaps I can override it and make it be transparent or remove it? How can I do it?

              • 4. Re: dataTable messed CSS
                Konstantin Mishin Novice

                Attach war, please.

                • 6. Re: dataTable messed CSS
                  Paolo Russian Newbie

                  P.s.: in the war you won't find latest RF code, since these xhtml/js/css are generated by our application and we already rolled back. But the only real change is the different rf jar in the web-inf/lib folder and the syntax in the xhtml that now is made for old richfaces, the one with issues is posted above in this post.
                  Basically, since the code used is copy 'n pasted from the exadel live example, my error if there is any, should be in some erroneous configuration.
                  Thanks a lot again.

                  • 7. Re: dataTable messed CSS
                    Ilya Shaikovsky Master

                    I've just added few stylesheets from your war to the demosite sample - and the result was broken.

                    I do not think that this is RF problem and currently we can't explore this "simple" sample ASAP. Can only can currently recomend you to check your own stylesheets with firebug in order to avoid problematic styles applied.

                    • 8. Re: dataTable messed CSS
                      Paolo Russian Newbie

                      the war is only for tree structure sample, as the file I posted contains a war made for older richfaces, not the latest one! The problem anyway, as you also noticed, is stylesheet related for sure. The issue with the "sortDiv" named div happens also without any custom style.. It's always over the table covering its contents. If you enlarge the font size with ctrl+ the layouts breaks and you may see a perfect richface table behind.. but this "sortDiv" element is defined and created runtime by richfaces it's not one of my elements.

                      • 9. Re: dataTable messed CSS
                        Paolo Russian Newbie

                        furthermore, the war may result broken anyway because the pages are intended to be task driven, also the navigation and the actions on the page are managed externally so it may happen that you cannot see anything with the correct set of beans behind.

                        • 10. Re: dataTable messed CSS
                          Ilya Shaikovsky Master

                          I do not tell you that sortDiv is an element that created by you. I just ask you to explore with the fireBug the styles that affects it causing such effect.