8 Replies Latest reply on Apr 14, 2009 12:48 PM by hwoarang

    DataTable: why fixed width do not work ?

    hwoarang

      I have a problem with DataTable columns width:

      How to set a fixed width ?

      If the text is bigger than column's width, the line gets wrapped (and I dont want this)

      If I set style="white-space:nowrap;" on dataTable the column's width get resized to fit the text (even with fixed width)

      How to say, i.e., 30px as column's width and get a bigger text cut ? I meant only the text's portion that fit in the column's width get displayed.

      Thank you in advance.

        • 1. Re: DataTable: why fixed width do not work ?
          nbelaevski

          Hi,

          Have you tried overflow: hidden?

          • 2. Re: DataTable: why fixed width do not work ?
            hwoarang

             

            "nbelaevski" wrote:
            Hi,
            Have you tried overflow: hidden?


            Hi, sorry for delay (travelling)

            Yes, I tried overflow: hidden
            not success... I tried in column and dataTable tags...

            Any more hint? helps to post the code here?

            Thank you.


            • 3. Re: DataTable: why fixed width do not work ?
              ilya_shaikovsky

              maybe try to wrap the content inside the column to panel group with div layout and define overflow on this div?

              • 4. Re: DataTable: why fixed width do not work ?
                hwoarang

                 

                "ilya_shaikovsky" wrote:
                maybe try to wrap the content inside the column to panel group with div layout and define overflow on this div?


                Hi Ilya,
                unfortunately, didn't work. No matter what, if I use style="white-space:nowrap" the column get resized to fit the context.

                Maybe I misunderstood you, so here's my dataTable, using your suggestion: any more hint will be more than appreciated.

                I'm using 3.2.2-GA.

                Thank you.

                <r:panel style="width:760px; height: 240px;">
                 <r:dataTable
                 value="#{ManterLocalizacao.lista}"
                 var="item"
                 sortMode="single"
                 id="tabelaLocalizacao"
                 rows="7"
                 columnsWidth="10px,630px,10px,5px,5px"
                 width="700px"
                 align="center">
                 <f:facet name="header">
                 <h:outputText
                 value="#{ControleApp.msgQtdeRegistrosEncontrados}" />
                 </f:facet>
                 <r:column
                 sortBy="#{item.sigla}"
                 style="text-align:center;">
                 <f:facet name="header">
                 <h:outputText value="#{msg.labelSigla}" />
                 </f:facet>
                 <h:outputText value="#{item.sigla}" />
                 </r:column>
                 <r:column sortBy="#{item.descricao}">
                 <f:facet name="header">
                 <h:outputText value="#{msg.labelDescricao}" />
                 </f:facet>
                 <h:panelGroup
                 layout="block"
                 style="overflow: hidden;">
                 <h:outputText value="#{item.descricao}" />
                 </h:panelGroup>
                 </r:column>
                 <r:column
                 sortBy="#{item.telefone1}"
                 style="text-align:center;">
                 <f:facet name="header">
                 <h:outputText value="#{msg.labelFone1}" />
                 </f:facet>
                 <h:outputText value="#{item.telefone1}" />
                 </r:column>
                 <r:column style="text-align:center;">
                 <f:facet name="header">
                 <h:outputText value="" />
                 </f:facet>
                 <h:commandLink
                 action="#{ManterLocalizacao.alterar}"
                 style="text-decoration: none; border: none">
                 <h:graphicImage
                 value="/imagens/alterar.gif"
                 style="text-decoration: none; border: none"
                 title="alterar registro" />
                 </h:commandLink>
                 </r:column>
                 <r:column style="text-align:center;">
                 <f:facet name="header">
                 <h:outputText value="" />
                 </f:facet>
                 <h:commandLink
                 action="#{ManterLocalizacao.excluir}"
                 style="text-decoration: none; border: none">
                 <h:graphicImage
                 value="/imagens/excluir.gif"
                 style="text-decoration: none; border: none"
                 title="excluir registro" />
                 </h:commandLink>
                 </r:column>
                 </r:dataTable>
                </r:panel>
                


                • 5. Re: DataTable: why fixed width do not work ?
                  ilya_shaikovsky

                   

                   <h:panelGroup
                   layout="block"
                   style="overflow: hidden;">
                  


                  add sizes there also.

                  • 6. Re: DataTable: why fixed width do not work ?
                    hwoarang

                     

                    "ilya_shaikovsky" wrote:
                     <h:panelGroup
                     layout="block"
                     style="overflow: hidden;">
                    


                    add sizes there also.


                    Thank you Ilya:

                    <h:panelGroup
                     layout="block"
                     style="overflow: hidden; width: 500px; white-space: nowrap;">
                     <h:outputText value="#{item.descricao}" />
                    </h:panelGroup>
                    


                    I need to use white-space:nowrap too, but only for the panelGroup. I was using in the table, on nothing was working... :)

                    Thank you again.

                    • 7. Re: DataTable: why fixed width do not work ?
                      hwoarang

                      Hi all,
                      I'm sorry for reopening the thread, but I need more help with this.
                      I have a rich:dataTable inside rich:panel, both with width=100%.
                      The first dataTable's column holds the person's name, that may vary its width.
                      The problem is that if I set "white-space: nowrap;" on name, the column grows to accomodate the text and the dataTable gets rendered outside rich:panel boundary (right side), something like this:

                      Exemple 1

                      +------------------------+
                      |+----------------------+-------+
                      || NAME | TITLE |
                      |+----------------------+-------+
                      || A Name | Title |
                      |+----------------------+-------+
                      || A Very Long Name Here| Title |
                      |+----------------------+-------+
                      || | |
                      || | |
                      || | |
                      |+----------------------+-------+
                      +------------------------+
                      


                      If I don't set the "white-space: nowrap;", I got the name line break and, again, the table gets outside rich:panel (bottom):

                      Exemple 2
                      +------------------------+
                      |+--------------+-------+|
                      || NAME | TITLE ||
                      |+--------------+-------+|
                      || A Name | Title ||
                      |+--------------+-------+|
                      || A Very Long | Title ||
                      || Name Here | ||
                      |+--------------+-------+|
                      || | ||
                      +| | |+
                       +--------------+-------+
                      


                      Using the last Ilya suggestion (the panelGroup surrounding the name text) I got success, but only for one fixed screen resolution. If I change the screen resolution, lets say a bigger one, I got much blank spaces after the name, as the name is trimmed. Or I got the problem in Example 1, if changing for a smaller resolution..

                      I'm wondering if its possible to archive this result:

                      Exemple 3

                      +------------------------+
                      |+--------------+-------+|
                      || NAME | TITLE ||
                      |+--------------+-------+|
                      || A Name | Title ||
                      |+--------------+-------+|
                      || A Very Long N| Title ||
                      |+--------------+-------+|
                      || | ||
                      || | ||
                      || | ||
                      |+--------------+-------+|
                      +------------------------+
                      


                      I mean, no matter the screen resolution defined, the column will show only what could fit in its width (lets say 25%).

                      Any help would be very appreciated.

                      Thank you!

                      Snippet: panel and dataTable
                      <r:panel style="width:100%; height: 300px;">
                       <r:dataTable
                       value="#{ManterCertificado.lista}"
                       var="item"
                       sortMode="single"
                       id="tabelaGUI"
                       rows="9"
                       width="100%"
                       align="center">
                       <f:facet name="header">
                       <r:columnGroup>
                       <r:column colspan="7">
                       <h:outputText value="#{ManterCertificado.msgQtdeRegistrosEncontrados}" />
                       </r:column>
                       <r:column breakBefore="true">
                       <h:outputText value="#{msg.labelName}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelTitle}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelCert}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelCarg}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelStart}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelEnd}" />
                       </r:column>
                       <r:column>
                       <h:outputText value="#{msg.labelStatus}" />
                       </r:column>
                       </r:columnGroup>
                       </f:facet>
                      [...]
                       <r:column
                       sortBy="#{item.pessoa.nome}"
                       filterMethod="#{ManterCertificado.filterPessoaNome}"
                       width="25%">
                       <f:facet name="header">
                       <h:inputText
                       onclick="Event.stop(event);"
                       value="#{ManterCertificado.pessoaNome}"
                       id="inputPessoaNome">
                       <a4j:support
                       event="onkeyup"
                       reRender="tabelaGUI, ds"
                       ignoreDupResponses="true"
                       requestDelay="200"
                       oncomplete="setCaretToEnd(event);" />
                       </h:inputText>
                       </f:facet>
                       <h:outputText
                       value="#{item.pessoa.matricula}-#{item.pessoa.nome}"
                       style="font-size: 9px;" />
                       </r:column>
                      [...]
                       </r:dataTable>
                      </r:panel>
                      


                      Hwoarang

                      • 8. Re: DataTable: why fixed width do not work ?
                        hwoarang

                        Hmmm...
                        I can't see the problem in IE6 but in other browsers (IE7, FF3, Chrome).
                        IE6 expands rich:panel its height to accomodate the rich:dataTable, even with explicit height defined.

                        Someone have any thought ??

                        Thank you.

                        Hwoarang