Loading ...
Sorry, an error occurred while loading the content.
 

Center DataTable Columns/Cells

Expand Messages
  • Carl Thompson
    I am trying to align cells in a dataTable generated using progressive enhancement. I have determined how to align the headers, but not all of the cells in a
    Message 1 of 9 , Aug 30, 2007
      I am trying to align cells in a dataTable generated using progressive
      enhancement.

      I have determined how to align the headers, but not all of the cells in
      a particular column.

      This works for headers ...
      .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
      center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
      text-align: center;} //note: p1 and p2 are the "keys" for each column
      and am using the Sam style.

      Help would be appreciated.
    • Satyam
      One of the properties you can asign a column is the className. A certain element may have more than one class name so you don t need to redefine the classes
      Message 2 of 9 , Aug 30, 2007
        One of the properties you can asign a column is the className. A certain
        element may have more than one class name so you don't need to redefine the
        classes already in use, you can define your own and it will be added to the
        cell elements.

        {key:'centeredcolumn',text:'title not centered', className:'centerContents'
        ....

        and centerContents can be declared in your own css as:

        .centerContents td {
        text-align:center;
        }

        Notice that since the className will be asigned to both the header cells and
        the data cells, you have to qualify it, otherwise your header cells will
        also get centered, I should know, it happened to me.
        You can also qualify it by tbody .centerContents.

        Satyam



        ----- Original Message -----
        From: "Carl Thompson" <cthompson@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Thursday, August 30, 2007 5:46 PM
        Subject: [ydn-javascript] Center DataTable Columns/Cells


        >I am trying to align cells in a dataTable generated using progressive
        > enhancement.
        >
        > I have determined how to align the headers, but not all of the cells in
        > a particular column.
        >
        > This works for headers ...
        > .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
        > center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
        > text-align: center;} //note: p1 and p2 are the "keys" for each column
        > and am using the Sam style.
        >
        > Help would be appreciated.
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
        > 29/08/2007 20:21
        >
        >
      • Carl Thompson
        Hmmm ... didn t work ... is it because I also use ...? formatter:YAHOO.widget.DataTable.formatCurrency --and -- parser:YAHOO.util.DataSource.parseNumber
        Message 3 of 9 , Aug 30, 2007
          Hmmm ... didn't work ... is it because I also use ...?
          formatter:YAHOO.widget.DataTable.formatCurrency
          --and --
          parser:YAHOO.util.DataSource.parseNumber

          Satyam wrote:
          > One of the properties you can asign a column is the className. A certain
          > element may have more than one class name so you don't need to redefine the
          > classes already in use, you can define your own and it will be added to the
          > cell elements.
          >
          > {key:'centeredcolumn',text:'title not centered', className:'centerContents'
          > ....
          >
          > and centerContents can be declared in your own css as:
          >
          > .centerContents td {
          > text-align:center;
          > }
          >
          > Notice that since the className will be asigned to both the header cells and
          > the data cells, you have to qualify it, otherwise your header cells will
          > also get centered, I should know, it happened to me.
          > You can also qualify it by tbody .centerContents.
          >
          > Satyam
          >
          >
          >
          > ----- Original Message -----
          > From: "Carl Thompson" <cthompson@...>
          > To: <ydn-javascript@yahoogroups.com>
          > Sent: Thursday, August 30, 2007 5:46 PM
          > Subject: [ydn-javascript] Center DataTable Columns/Cells
          >
          >
          >
          >> I am trying to align cells in a dataTable generated using progressive
          >> enhancement.
          >>
          >> I have determined how to align the headers, but not all of the cells in
          >> a particular column.
          >>
          >> This works for headers ...
          >> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
          >> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
          >> text-align: center;} //note: p1 and p2 are the "keys" for each column
          >> and am using the Sam style.
          >>
          >> Help would be appreciated.
          >>
          >>
          >>
          >> Yahoo! Groups Links
          >>
          >>
          >>
          >>
          >>
          >> --
          >> No virus found in this incoming message.
          >> Checked by AVG Free Edition.
          >> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
          >> 29/08/2007 20:21
          >>
          >>
          >>
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
        • Satyam
          Sorry, I replied from memory, but this is how I declared my style: .yui-dt-table tbody .euro { text-align:right; background: transparent url(euro.gif)
          Message 4 of 9 , Aug 30, 2007
            Sorry, I replied from memory, but this is how I declared my style:

            .yui-dt-table tbody .euro {
            text-align:right;
            background: transparent url(euro.gif) no-repeat left center;
            }

            I have in the column definition:

            className:'euro'

            and it does align right and has the euro.gif in the background to the left.

            I use formatter and parser also, but they don't hurt.

            Sorry for the wrong reply.

            Satyam



            ----- Original Message -----
            From: "Carl Thompson" <cthompson@...>
            To: <ydn-javascript@yahoogroups.com>
            Sent: Thursday, August 30, 2007 7:30 PM
            Subject: Re: [ydn-javascript] Center DataTable Columns/Cells


            > Hmmm ... didn't work ... is it because I also use ...?
            > formatter:YAHOO.widget.DataTable.formatCurrency
            > --and --
            > parser:YAHOO.util.DataSource.parseNumber
            >
            > Satyam wrote:
            >> One of the properties you can asign a column is the className. A certain
            >> element may have more than one class name so you don't need to redefine
            >> the
            >> classes already in use, you can define your own and it will be added to
            >> the
            >> cell elements.
            >>
            >> {key:'centeredcolumn',text:'title not centered',
            >> className:'centerContents'
            >> ....
            >>
            >> and centerContents can be declared in your own css as:
            >>
            >> .centerContents td {
            >> text-align:center;
            >> }
            >>
            >> Notice that since the className will be asigned to both the header cells
            >> and
            >> the data cells, you have to qualify it, otherwise your header cells will
            >> also get centered, I should know, it happened to me.
            >> You can also qualify it by tbody .centerContents.
            >>
            >> Satyam
            >>
            >>
            >>
            >> ----- Original Message -----
            >> From: "Carl Thompson" <cthompson@...>
            >> To: <ydn-javascript@yahoogroups.com>
            >> Sent: Thursday, August 30, 2007 5:46 PM
            >> Subject: [ydn-javascript] Center DataTable Columns/Cells
            >>
            >>
            >>
            >>> I am trying to align cells in a dataTable generated using progressive
            >>> enhancement.
            >>>
            >>> I have determined how to align the headers, but not all of the cells in
            >>> a particular column.
            >>>
            >>> This works for headers ...
            >>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
            >>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
            >>> text-align: center;} //note: p1 and p2 are the "keys" for each column
            >>> and am using the Sam style.
            >>>
            >>> Help would be appreciated.
            >>>
            >>>
            >>>
            >>> Yahoo! Groups Links
            >>>
            >>>
            >>>
            >>>
            >>>
            >>> --
            >>> No virus found in this incoming message.
            >>> Checked by AVG Free Edition.
            >>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
            >>> 29/08/2007 20:21
            >>>
            >>>
            >>>
            >>
            >>
            >>
            >>
            >> Yahoo! Groups Links
            >>
            >>
            >>
            >>
            >>
            >
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            > --
            > No virus found in this incoming message.
            > Checked by AVG Free Edition.
            > Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
            > 29/08/2007 20:21
            >
            >
          • Carl Thompson
            Your suggestion does not appear to work in IE -- but works OK in Firefox. Here is the URL for the code in question...
            Message 5 of 9 , Aug 31, 2007
              Your suggestion does not appear to work in IE -- but works OK in Firefox.

              Here is the URL for the code in question...
              http://www.countingopinions.com/yui_test.htm

              Satyam wrote:
              > Sorry, I replied from memory, but this is how I declared my style:
              >
              > .yui-dt-table tbody .euro {
              > text-align:right;
              > background: transparent url(euro.gif) no-repeat left center;
              > }
              >
              > I have in the column definition:
              >
              > className:'euro'
              >
              > and it does align right and has the euro.gif in the background to the left.
              >
              > I use formatter and parser also, but they don't hurt.
              >
              > Sorry for the wrong reply.
              >
              > Satyam
              >
              >
              >
              > ----- Original Message -----
              > From: "Carl Thompson" <cthompson@...>
              > To: <ydn-javascript@yahoogroups.com>
              > Sent: Thursday, August 30, 2007 7:30 PM
              > Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
              >
              >
              >
              >> Hmmm ... didn't work ... is it because I also use ...?
              >> formatter:YAHOO.widget.DataTable.formatCurrency
              >> --and --
              >> parser:YAHOO.util.DataSource.parseNumber
              >>
              >> Satyam wrote:
              >>
              >>> One of the properties you can asign a column is the className. A certain
              >>> element may have more than one class name so you don't need to redefine
              >>> the
              >>> classes already in use, you can define your own and it will be added to
              >>> the
              >>> cell elements.
              >>>
              >>> {key:'centeredcolumn',text:'title not centered',
              >>> className:'centerContents'
              >>> ....
              >>>
              >>> and centerContents can be declared in your own css as:
              >>>
              >>> .centerContents td {
              >>> text-align:center;
              >>> }
              >>>
              >>> Notice that since the className will be asigned to both the header cells
              >>> and
              >>> the data cells, you have to qualify it, otherwise your header cells will
              >>> also get centered, I should know, it happened to me.
              >>> You can also qualify it by tbody .centerContents.
              >>>
              >>> Satyam
              >>>
              >>>
              >>>
              >>> ----- Original Message -----
              >>> From: "Carl Thompson" <cthompson@...>
              >>> To: <ydn-javascript@yahoogroups.com>
              >>> Sent: Thursday, August 30, 2007 5:46 PM
              >>> Subject: [ydn-javascript] Center DataTable Columns/Cells
              >>>
              >>>
              >>>
              >>>
              >>>> I am trying to align cells in a dataTable generated using progressive
              >>>> enhancement.
              >>>>
              >>>> I have determined how to align the headers, but not all of the cells in
              >>>> a particular column.
              >>>>
              >>>> This works for headers ...
              >>>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
              >>>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
              >>>> text-align: center;} //note: p1 and p2 are the "keys" for each column
              >>>> and am using the Sam style.
              >>>>
              >>>> Help would be appreciated.
              >>>>
              >>>>
              >>>>
              >>>> Yahoo! Groups Links
              >>>>
              >>>>
              >>>>
              >>>>
              >>>>
              >>>> --
              >>>> No virus found in this incoming message.
              >>>> Checked by AVG Free Edition.
              >>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
              >>>> 29/08/2007 20:21
              >>>>
              >>>>
              >>>>
              >>>>
              >>>
              >>>
              >>> Yahoo! Groups Links
              >>>
              >>>
              >>>
              >>>
              >>>
              >>>
              >>
              >>
              >> Yahoo! Groups Links
              >>
              >>
              >>
              >>
              >>
              >> --
              >> No virus found in this incoming message.
              >> Checked by AVG Free Edition.
              >> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
              >> 29/08/2007 20:21
              >>
              >>
              >>
              >
              >
              >
              >
              > Yahoo! Groups Links
              >
              >
              >
              >
            • Satyam
              I just checked it and you are right, I didn t pay attention to that. Nevertheless, I added !important to the alignment and it worked: .yui-dt-table tbody
              Message 6 of 9 , Sep 3, 2007
                I just checked it and you are right, I didn't pay attention to that.
                Nevertheless, I added !important to the alignment and it worked:

                .yui-dt-table tbody .euro {
                text-align:right!important;
                background: url(euro.gif) no-repeat left center;
                }

                This leads me to believe that there is some other selector that has priority
                over this cell and forces its alignment over that in this class. The
                !important gives this one priority, but it is somewhat rude, there should be
                some way to give the text alignment higher priority. So, I tried several,
                but this one is the one that worked for both:

                .yui-skin-sam .yui-dt-table tbody .euro {
                text-align:right;
                background: url(euro.gif) no-repeat left center;
                }

                Still, I don't like this one because I still want my euros aligned right
                even when or if I am not using the sam skin.

                So, I still tried a little bit more and found:

                .yui-dt-table tbody td.euro {
                text-align:right;
                background: url(euro.gif) no-repeat left center;
                }

                There is no space in between td.euro. If you put a space in there, it won't
                work. Without a space it means 'a td of class euro', with a space it means
                'something of class euro within the td'. Both IE and FF agree on that.
                What they don't agree, as you have noticed, is in the priorities of
                selectors.

                Satyam


                ----- Original Message -----
                From: "Carl Thompson" <cthompson@...>
                To: <ydn-javascript@yahoogroups.com>
                Sent: Saturday, September 01, 2007 5:36 AM
                Subject: Re: [ydn-javascript] Center DataTable Columns/Cells


                > Your suggestion does not appear to work in IE -- but works OK in Firefox.
                >
                > Here is the URL for the code in question...
                > http://www.countingopinions.com/yui_test.htm
                >
                > Satyam wrote:
                >> Sorry, I replied from memory, but this is how I declared my style:
                >>
                >> .yui-dt-table tbody .euro {
                >> text-align:right;
                >> background: transparent url(euro.gif) no-repeat left center;
                >> }
                >>
                >> I have in the column definition:
                >>
                >> className:'euro'
                >>
                >> and it does align right and has the euro.gif in the background to the
                >> left.
                >>
                >> I use formatter and parser also, but they don't hurt.
                >>
                >> Sorry for the wrong reply.
                >>
                >> Satyam
                >>
                >>
                >>
                >> ----- Original Message -----
                >> From: "Carl Thompson" <cthompson@...>
                >> To: <ydn-javascript@yahoogroups.com>
                >> Sent: Thursday, August 30, 2007 7:30 PM
                >> Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                >>
                >>
                >>
                >>> Hmmm ... didn't work ... is it because I also use ...?
                >>> formatter:YAHOO.widget.DataTable.formatCurrency
                >>> --and --
                >>> parser:YAHOO.util.DataSource.parseNumber
                >>>
                >>> Satyam wrote:
                >>>
                >>>> One of the properties you can asign a column is the className. A
                >>>> certain
                >>>> element may have more than one class name so you don't need to redefine
                >>>> the
                >>>> classes already in use, you can define your own and it will be added to
                >>>> the
                >>>> cell elements.
                >>>>
                >>>> {key:'centeredcolumn',text:'title not centered',
                >>>> className:'centerContents'
                >>>> ....
                >>>>
                >>>> and centerContents can be declared in your own css as:
                >>>>
                >>>> .centerContents td {
                >>>> text-align:center;
                >>>> }
                >>>>
                >>>> Notice that since the className will be asigned to both the header
                >>>> cells
                >>>> and
                >>>> the data cells, you have to qualify it, otherwise your header cells
                >>>> will
                >>>> also get centered, I should know, it happened to me.
                >>>> You can also qualify it by tbody .centerContents.
                >>>>
                >>>> Satyam
                >>>>
                >>>>
                >>>>
                >>>> ----- Original Message -----
                >>>> From: "Carl Thompson" <cthompson@...>
                >>>> To: <ydn-javascript@yahoogroups.com>
                >>>> Sent: Thursday, August 30, 2007 5:46 PM
                >>>> Subject: [ydn-javascript] Center DataTable Columns/Cells
                >>>>
                >>>>
                >>>>
                >>>>
                >>>>> I am trying to align cells in a dataTable generated using progressive
                >>>>> enhancement.
                >>>>>
                >>>>> I have determined how to align the headers, but not all of the cells
                >>>>> in
                >>>>> a particular column.
                >>>>>
                >>>>> This works for headers ...
                >>>>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
                >>>>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
                >>>>> text-align: center;} //note: p1 and p2 are the "keys" for each column
                >>>>> and am using the Sam style.
                >>>>>
                >>>>> Help would be appreciated.
                >>>>>
                >>>>>
                >>>>>
                >>>>> Yahoo! Groups Links
                >>>>>
                >>>>>
                >>>>>
                >>>>>
                >>>>>
                >>>>> --
                >>>>> No virus found in this incoming message.
                >>>>> Checked by AVG Free Edition.
                >>>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                >>>>> 29/08/2007 20:21
                >>>>>
                >>>>>
                >>>>>
                >>>>>
                >>>>
                >>>>
                >>>> Yahoo! Groups Links
                >>>>
                >>>>
                >>>>
                >>>>
                >>>>
                >>>>
                >>>
                >>>
                >>> Yahoo! Groups Links
                >>>
                >>>
                >>>
                >>>
                >>>
                >>> --
                >>> No virus found in this incoming message.
                >>> Checked by AVG Free Edition.
                >>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                >>> 29/08/2007 20:21
                >>>
                >>>
                >>>
                >>
                >>
                >>
                >>
                >> Yahoo! Groups Links
                >>
                >>
                >>
                >>
                >
                >
                >
                >
                > Yahoo! Groups Links
                >
                >
                >
                >
                >
                > --
                > No virus found in this incoming message.
                > Checked by AVG Free Edition.
                > Version: 7.5.484 / Virus Database: 269.13.2/985 - Release Date: 02/09/2007
                > 16:32
                >
                >
              • Carl Thompson
                Thanks!
                Message 7 of 9 , Sep 3, 2007
                  Thanks!

                  Satyam wrote:
                  > I just checked it and you are right, I didn't pay attention to that.
                  > Nevertheless, I added !important to the alignment and it worked:
                  >
                  > .yui-dt-table tbody .euro {
                  > text-align:right!important;
                  > background: url(euro.gif) no-repeat left center;
                  > }
                  >
                  > This leads me to believe that there is some other selector that has priority
                  > over this cell and forces its alignment over that in this class. The
                  > !important gives this one priority, but it is somewhat rude, there should be
                  > some way to give the text alignment higher priority. So, I tried several,
                  > but this one is the one that worked for both:
                  >
                  > .yui-skin-sam .yui-dt-table tbody .euro {
                  > text-align:right;
                  > background: url(euro.gif) no-repeat left center;
                  > }
                  >
                  > Still, I don't like this one because I still want my euros aligned right
                  > even when or if I am not using the sam skin.
                  >
                  > So, I still tried a little bit more and found:
                  >
                  > .yui-dt-table tbody td.euro {
                  > text-align:right;
                  > background: url(euro.gif) no-repeat left center;
                  > }
                  >
                  > There is no space in between td.euro. If you put a space in there, it won't
                  > work. Without a space it means 'a td of class euro', with a space it means
                  > 'something of class euro within the td'. Both IE and FF agree on that.
                  > What they don't agree, as you have noticed, is in the priorities of
                  > selectors.
                  >
                  > Satyam
                  >
                  >
                  > ----- Original Message -----
                  > From: "Carl Thompson" <cthompson@...>
                  > To: <ydn-javascript@yahoogroups.com>
                  > Sent: Saturday, September 01, 2007 5:36 AM
                  > Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                  >
                  >
                  >
                  >> Your suggestion does not appear to work in IE -- but works OK in Firefox.
                  >>
                  >> Here is the URL for the code in question...
                  >> http://www.countingopinions.com/yui_test.htm
                  >>
                  >> Satyam wrote:
                  >>
                  >>> Sorry, I replied from memory, but this is how I declared my style:
                  >>>
                  >>> .yui-dt-table tbody .euro {
                  >>> text-align:right;
                  >>> background: transparent url(euro.gif) no-repeat left center;
                  >>> }
                  >>>
                  >>> I have in the column definition:
                  >>>
                  >>> className:'euro'
                  >>>
                  >>> and it does align right and has the euro.gif in the background to the
                  >>> left.
                  >>>
                  >>> I use formatter and parser also, but they don't hurt.
                  >>>
                  >>> Sorry for the wrong reply.
                  >>>
                  >>> Satyam
                  >>>
                  >>>
                  >>>
                  >>> ----- Original Message -----
                  >>> From: "Carl Thompson" <cthompson@...>
                  >>> To: <ydn-javascript@yahoogroups.com>
                  >>> Sent: Thursday, August 30, 2007 7:30 PM
                  >>> Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                  >>>
                  >>>
                  >>>
                  >>>
                  >>>> Hmmm ... didn't work ... is it because I also use ...?
                  >>>> formatter:YAHOO.widget.DataTable.formatCurrency
                  >>>> --and --
                  >>>> parser:YAHOO.util.DataSource.parseNumber
                  >>>>
                  >>>> Satyam wrote:
                  >>>>
                  >>>>
                  >>>>> One of the properties you can asign a column is the className. A
                  >>>>> certain
                  >>>>> element may have more than one class name so you don't need to redefine
                  >>>>> the
                  >>>>> classes already in use, you can define your own and it will be added to
                  >>>>> the
                  >>>>> cell elements.
                  >>>>>
                  >>>>> {key:'centeredcolumn',text:'title not centered',
                  >>>>> className:'centerContents'
                  >>>>> ....
                  >>>>>
                  >>>>> and centerContents can be declared in your own css as:
                  >>>>>
                  >>>>> .centerContents td {
                  >>>>> text-align:center;
                  >>>>> }
                  >>>>>
                  >>>>> Notice that since the className will be asigned to both the header
                  >>>>> cells
                  >>>>> and
                  >>>>> the data cells, you have to qualify it, otherwise your header cells
                  >>>>> will
                  >>>>> also get centered, I should know, it happened to me.
                  >>>>> You can also qualify it by tbody .centerContents.
                  >>>>>
                  >>>>> Satyam
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>> ----- Original Message -----
                  >>>>> From: "Carl Thompson" <cthompson@...>
                  >>>>> To: <ydn-javascript@yahoogroups.com>
                  >>>>> Sent: Thursday, August 30, 2007 5:46 PM
                  >>>>> Subject: [ydn-javascript] Center DataTable Columns/Cells
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>> I am trying to align cells in a dataTable generated using progressive
                  >>>>>> enhancement.
                  >>>>>>
                  >>>>>> I have determined how to align the headers, but not all of the cells
                  >>>>>> in
                  >>>>>> a particular column.
                  >>>>>>
                  >>>>>> This works for headers ...
                  >>>>>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-align:
                  >>>>>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid #000;
                  >>>>>> text-align: center;} //note: p1 and p2 are the "keys" for each column
                  >>>>>> and am using the Sam style.
                  >>>>>>
                  >>>>>> Help would be appreciated.
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>> Yahoo! Groups Links
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>> --
                  >>>>>> No virus found in this incoming message.
                  >>>>>> Checked by AVG Free Edition.
                  >>>>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                  >>>>>> 29/08/2007 20:21
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>>>
                  >>>>> Yahoo! Groups Links
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>> Yahoo! Groups Links
                  >>>>
                  >>>>
                  >>>>
                  >>>>
                  >>>>
                  >>>> --
                  >>>> No virus found in this incoming message.
                  >>>> Checked by AVG Free Edition.
                  >>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                  >>>> 29/08/2007 20:21
                  >>>>
                  >>>>
                  >>>>
                  >>>>
                  >>>
                  >>>
                  >>> Yahoo! Groups Links
                  >>>
                  >>>
                  >>>
                  >>>
                  >>>
                  >>
                  >>
                  >> Yahoo! Groups Links
                  >>
                  >>
                  >>
                  >>
                  >>
                  >> --
                  >> No virus found in this incoming message.
                  >> Checked by AVG Free Edition.
                  >> Version: 7.5.484 / Virus Database: 269.13.2/985 - Release Date: 02/09/2007
                  >> 16:32
                  >>
                  >>
                  >>
                  >
                  >
                  >
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >
                  >
                • egocogitovolo
                  Sorry to resurrect an old thread but does this still work with 2.5.1 I cant seem to get any of these three examples working... Thanks. ... that. ... priority
                  Message 8 of 9 , May 20, 2008
                    Sorry to resurrect an old thread but does this still work with 2.5.1
                    I cant seem to get any of these three examples working...

                    Thanks.

                    --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
                    >
                    > I just checked it and you are right, I didn't pay attention to
                    that.
                    > Nevertheless, I added !important to the alignment and it worked:
                    >
                    > .yui-dt-table tbody .euro {
                    > text-align:right!important;
                    > background: url(euro.gif) no-repeat left center;
                    > }
                    >
                    > This leads me to believe that there is some other selector that has
                    priority
                    > over this cell and forces its alignment over that in this class.
                    The
                    > !important gives this one priority, but it is somewhat rude, there
                    should be
                    > some way to give the text alignment higher priority. So, I tried
                    several,
                    > but this one is the one that worked for both:
                    >
                    > .yui-skin-sam .yui-dt-table tbody .euro {
                    > text-align:right;
                    > background: url(euro.gif) no-repeat left center;
                    > }
                    >
                    > Still, I don't like this one because I still want my euros aligned
                    right
                    > even when or if I am not using the sam skin.
                    >
                    > So, I still tried a little bit more and found:
                    >
                    > .yui-dt-table tbody td.euro {
                    > text-align:right;
                    > background: url(euro.gif) no-repeat left center;
                    > }
                    >
                    > There is no space in between td.euro. If you put a space in there,
                    it won't
                    > work. Without a space it means 'a td of class euro', with a space
                    it means
                    > 'something of class euro within the td'. Both IE and FF agree on
                    that.
                    > What they don't agree, as you have noticed, is in the priorities of
                    > selectors.
                    >
                    > Satyam
                    >
                    >
                    > ----- Original Message -----
                    > From: "Carl Thompson" <cthompson@...>
                    > To: <ydn-javascript@yahoogroups.com>
                    > Sent: Saturday, September 01, 2007 5:36 AM
                    > Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                    >
                    >
                    > > Your suggestion does not appear to work in IE -- but works OK in
                    Firefox.
                    > >
                    > > Here is the URL for the code in question...
                    > > http://www.countingopinions.com/yui_test.htm
                    > >
                    > > Satyam wrote:
                    > >> Sorry, I replied from memory, but this is how I declared my
                    style:
                    > >>
                    > >> .yui-dt-table tbody .euro {
                    > >> text-align:right;
                    > >> background: transparent url(euro.gif) no-repeat left
                    center;
                    > >> }
                    > >>
                    > >> I have in the column definition:
                    > >>
                    > >> className:'euro'
                    > >>
                    > >> and it does align right and has the euro.gif in the background
                    to the
                    > >> left.
                    > >>
                    > >> I use formatter and parser also, but they don't hurt.
                    > >>
                    > >> Sorry for the wrong reply.
                    > >>
                    > >> Satyam
                    > >>
                    > >>
                    > >>
                    > >> ----- Original Message -----
                    > >> From: "Carl Thompson" <cthompson@...>
                    > >> To: <ydn-javascript@yahoogroups.com>
                    > >> Sent: Thursday, August 30, 2007 7:30 PM
                    > >> Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                    > >>
                    > >>
                    > >>
                    > >>> Hmmm ... didn't work ... is it because I also use ...?
                    > >>> formatter:YAHOO.widget.DataTable.formatCurrency
                    > >>> --and --
                    > >>> parser:YAHOO.util.DataSource.parseNumber
                    > >>>
                    > >>> Satyam wrote:
                    > >>>
                    > >>>> One of the properties you can asign a column is the
                    className. A
                    > >>>> certain
                    > >>>> element may have more than one class name so you don't need to
                    redefine
                    > >>>> the
                    > >>>> classes already in use, you can define your own and it will be
                    added to
                    > >>>> the
                    > >>>> cell elements.
                    > >>>>
                    > >>>> {key:'centeredcolumn',text:'title not centered',
                    > >>>> className:'centerContents'
                    > >>>> ....
                    > >>>>
                    > >>>> and centerContents can be declared in your own css as:
                    > >>>>
                    > >>>> .centerContents td {
                    > >>>> text-align:center;
                    > >>>> }
                    > >>>>
                    > >>>> Notice that since the className will be asigned to both the
                    header
                    > >>>> cells
                    > >>>> and
                    > >>>> the data cells, you have to qualify it, otherwise your header
                    cells
                    > >>>> will
                    > >>>> also get centered, I should know, it happened to me.
                    > >>>> You can also qualify it by tbody .centerContents.
                    > >>>>
                    > >>>> Satyam
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>> ----- Original Message -----
                    > >>>> From: "Carl Thompson" <cthompson@...>
                    > >>>> To: <ydn-javascript@yahoogroups.com>
                    > >>>> Sent: Thursday, August 30, 2007 5:46 PM
                    > >>>> Subject: [ydn-javascript] Center DataTable Columns/Cells
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>>> I am trying to align cells in a dataTable generated using
                    progressive
                    > >>>>> enhancement.
                    > >>>>>
                    > >>>>> I have determined how to align the headers, but not all of
                    the cells
                    > >>>>> in
                    > >>>>> a particular column.
                    > >>>>>
                    > >>>>> This works for headers ...
                    > >>>>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-
                    align:
                    > >>>>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid
                    #000;
                    > >>>>> text-align: center;} //note: p1 and p2 are the "keys" for
                    each column
                    > >>>>> and am using the Sam style.
                    > >>>>>
                    > >>>>> Help would be appreciated.
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>> Yahoo! Groups Links
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>> --
                    > >>>>> No virus found in this incoming message.
                    > >>>>> Checked by AVG Free Edition.
                    > >>>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release
                    Date:
                    > >>>>> 29/08/2007 20:21
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>>
                    > >>>>
                    > >>>>
                    > >>>> Yahoo! Groups Links
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>>
                    > >>>
                    > >>>
                    > >>> Yahoo! Groups Links
                    > >>>
                    > >>>
                    > >>>
                    > >>>
                    > >>>
                    > >>> --
                    > >>> No virus found in this incoming message.
                    > >>> Checked by AVG Free Edition.
                    > >>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                    > >>> 29/08/2007 20:21
                    > >>>
                    > >>>
                    > >>>
                    > >>
                    > >>
                    > >>
                    > >>
                    > >> Yahoo! Groups Links
                    > >>
                    > >>
                    > >>
                    > >>
                    > >
                    > >
                    > >
                    > >
                    > > Yahoo! Groups Links
                    > >
                    > >
                    > >
                    > >
                    > >
                    > > --
                    > > No virus found in this incoming message.
                    > > Checked by AVG Free Edition.
                    > > Version: 7.5.484 / Virus Database: 269.13.2/985 - Release Date:
                    02/09/2007
                    > > 16:32
                    > >
                    > >
                    >
                  • y_lsmith
                    var myColumnDef = [ {key: foo , label: A long column title }, {key: bar } ]; var myDataTable = new YAHOO.widget.DataTable( tbl ,myColumnDef,...); You can
                    Message 9 of 9 , May 21, 2008
                      var myColumnDef = [
                      {key: 'foo', label: 'A long column title'},
                      {key: 'bar'}
                      ];

                      var myDataTable = new YAHOO.widget.DataTable('tbl',myColumnDef,...);

                      You can align the cell content in column foo in your css

                      .yui-skin-sam #tbl .yui-dt-col-foo {
                      text-align: center;
                      }

                      Hope this helps,
                      Luke

                      --- In ydn-javascript@yahoogroups.com, "egocogitovolo"
                      <egocogitovolo@...> wrote:
                      >
                      > Sorry to resurrect an old thread but does this still work with 2.5.1
                      > I cant seem to get any of these three examples working...
                      >
                      > Thanks.
                      >
                      > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
                      > >
                      > > I just checked it and you are right, I didn't pay attention to
                      > that.
                      > > Nevertheless, I added !important to the alignment and it worked:
                      > >
                      > > .yui-dt-table tbody .euro {
                      > > text-align:right!important;
                      > > background: url(euro.gif) no-repeat left center;
                      > > }
                      > >
                      > > This leads me to believe that there is some other selector that has
                      > priority
                      > > over this cell and forces its alignment over that in this class.
                      > The
                      > > !important gives this one priority, but it is somewhat rude, there
                      > should be
                      > > some way to give the text alignment higher priority. So, I tried
                      > several,
                      > > but this one is the one that worked for both:
                      > >
                      > > .yui-skin-sam .yui-dt-table tbody .euro {
                      > > text-align:right;
                      > > background: url(euro.gif) no-repeat left center;
                      > > }
                      > >
                      > > Still, I don't like this one because I still want my euros aligned
                      > right
                      > > even when or if I am not using the sam skin.
                      > >
                      > > So, I still tried a little bit more and found:
                      > >
                      > > .yui-dt-table tbody td.euro {
                      > > text-align:right;
                      > > background: url(euro.gif) no-repeat left center;
                      > > }
                      > >
                      > > There is no space in between td.euro. If you put a space in there,
                      > it won't
                      > > work. Without a space it means 'a td of class euro', with a space
                      > it means
                      > > 'something of class euro within the td'. Both IE and FF agree on
                      > that.
                      > > What they don't agree, as you have noticed, is in the priorities of
                      > > selectors.
                      > >
                      > > Satyam
                      > >
                      > >
                      > > ----- Original Message -----
                      > > From: "Carl Thompson" <cthompson@>
                      > > To: <ydn-javascript@yahoogroups.com>
                      > > Sent: Saturday, September 01, 2007 5:36 AM
                      > > Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                      > >
                      > >
                      > > > Your suggestion does not appear to work in IE -- but works OK in
                      > Firefox.
                      > > >
                      > > > Here is the URL for the code in question...
                      > > > http://www.countingopinions.com/yui_test.htm
                      > > >
                      > > > Satyam wrote:
                      > > >> Sorry, I replied from memory, but this is how I declared my
                      > style:
                      > > >>
                      > > >> .yui-dt-table tbody .euro {
                      > > >> text-align:right;
                      > > >> background: transparent url(euro.gif) no-repeat left
                      > center;
                      > > >> }
                      > > >>
                      > > >> I have in the column definition:
                      > > >>
                      > > >> className:'euro'
                      > > >>
                      > > >> and it does align right and has the euro.gif in the background
                      > to the
                      > > >> left.
                      > > >>
                      > > >> I use formatter and parser also, but they don't hurt.
                      > > >>
                      > > >> Sorry for the wrong reply.
                      > > >>
                      > > >> Satyam
                      > > >>
                      > > >>
                      > > >>
                      > > >> ----- Original Message -----
                      > > >> From: "Carl Thompson" <cthompson@>
                      > > >> To: <ydn-javascript@yahoogroups.com>
                      > > >> Sent: Thursday, August 30, 2007 7:30 PM
                      > > >> Subject: Re: [ydn-javascript] Center DataTable Columns/Cells
                      > > >>
                      > > >>
                      > > >>
                      > > >>> Hmmm ... didn't work ... is it because I also use ...?
                      > > >>> formatter:YAHOO.widget.DataTable.formatCurrency
                      > > >>> --and --
                      > > >>> parser:YAHOO.util.DataSource.parseNumber
                      > > >>>
                      > > >>> Satyam wrote:
                      > > >>>
                      > > >>>> One of the properties you can asign a column is the
                      > className. A
                      > > >>>> certain
                      > > >>>> element may have more than one class name so you don't need to
                      > redefine
                      > > >>>> the
                      > > >>>> classes already in use, you can define your own and it will be
                      > added to
                      > > >>>> the
                      > > >>>> cell elements.
                      > > >>>>
                      > > >>>> {key:'centeredcolumn',text:'title not centered',
                      > > >>>> className:'centerContents'
                      > > >>>> ....
                      > > >>>>
                      > > >>>> and centerContents can be declared in your own css as:
                      > > >>>>
                      > > >>>> .centerContents td {
                      > > >>>> text-align:center;
                      > > >>>> }
                      > > >>>>
                      > > >>>> Notice that since the className will be asigned to both the
                      > header
                      > > >>>> cells
                      > > >>>> and
                      > > >>>> the data cells, you have to qualify it, otherwise your header
                      > cells
                      > > >>>> will
                      > > >>>> also get centered, I should know, it happened to me.
                      > > >>>> You can also qualify it by tbody .centerContents.
                      > > >>>>
                      > > >>>> Satyam
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>> ----- Original Message -----
                      > > >>>> From: "Carl Thompson" <cthompson@>
                      > > >>>> To: <ydn-javascript@yahoogroups.com>
                      > > >>>> Sent: Thursday, August 30, 2007 5:46 PM
                      > > >>>> Subject: [ydn-javascript] Center DataTable Columns/Cells
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>>> I am trying to align cells in a dataTable generated using
                      > progressive
                      > > >>>>> enhancement.
                      > > >>>>>
                      > > >>>>> I have determined how to align the headers, but not all of
                      > the cells
                      > > >>>>> in
                      > > >>>>> a particular column.
                      > > >>>>>
                      > > >>>>> This works for headers ...
                      > > >>>>> .yui-skin-sam th.yui-dt-col-p1 {border:1px solid #000; text-
                      > align:
                      > > >>>>> center;} .yui-skin-sam th.yui-dt-col-p2 {border:1px solid
                      > #000;
                      > > >>>>> text-align: center;} //note: p1 and p2 are the "keys" for
                      > each column
                      > > >>>>> and am using the Sam style.
                      > > >>>>>
                      > > >>>>> Help would be appreciated.
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>> Yahoo! Groups Links
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>> --
                      > > >>>>> No virus found in this incoming message.
                      > > >>>>> Checked by AVG Free Edition.
                      > > >>>>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release
                      > Date:
                      > > >>>>> 29/08/2007 20:21
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>>
                      > > >>>>
                      > > >>>>
                      > > >>>> Yahoo! Groups Links
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>>
                      > > >>>
                      > > >>>
                      > > >>> Yahoo! Groups Links
                      > > >>>
                      > > >>>
                      > > >>>
                      > > >>>
                      > > >>>
                      > > >>> --
                      > > >>> No virus found in this incoming message.
                      > > >>> Checked by AVG Free Edition.
                      > > >>> Version: 7.5.484 / Virus Database: 269.12.12/979 - Release Date:
                      > > >>> 29/08/2007 20:21
                      > > >>>
                      > > >>>
                      > > >>>
                      > > >>
                      > > >>
                      > > >>
                      > > >>
                      > > >> Yahoo! Groups Links
                      > > >>
                      > > >>
                      > > >>
                      > > >>
                      > > >
                      > > >
                      > > >
                      > > >
                      > > > Yahoo! Groups Links
                      > > >
                      > > >
                      > > >
                      > > >
                      > > >
                      > > > --
                      > > > No virus found in this incoming message.
                      > > > Checked by AVG Free Edition.
                      > > > Version: 7.5.484 / Virus Database: 269.13.2/985 - Release Date:
                      > 02/09/2007
                      > > > 16:32
                      > > >
                      > > >
                      > >
                      >
                    Your message has been successfully submitted and would be delivered to recipients shortly.