ui.tabs and ThemeRoller

[Diego A.]

Hi guys,

First of all, great work with the jQuery UI, library. Amazing!
Now for the bad news I'm afraid...

The code generated by the ThemeRoller has 3 references to the class
"ui-tabs-nav-item", but the plugin never adds that class to the
relevant elements.

Either, the ThemeRoller needs to be updated OR ui.tabs should add the
missing class to the relevant elements (which is the proper way to fix
this IMHO).

Cheers,
Diego A.

PS.: I wasn't sure whether to post this message here or in the jQuery
Dev group. I hope this is ok here....
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Seth - TA]

I noticed that yesterday when I rolled a theme. Also, saw a spacing
issue with the tabs and panel. Not sure if that has been mentioned
before either.

Seth

On Jul 1, 7:04 am, "Diego A." <diego.a...@...> wrote:

> Hi guys,
>
> First of all, great work with the jQuery UI, library. Amazing!
> Now for the bad news I'm afraid...
>
> The code generated by the ThemeRoller has 3 references to the class
> "ui-tabs-nav-item", but the plugin never adds that class to the
> relevant elements.
>
> Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> missing class to the relevant elements (which is the proper way to fix
> this IMHO).
>
> Cheers,
> Diego A.
>
> PS.: I wasn't sure whether to post this message here or in the jQuery
> Dev group. I hope this is ok here....

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Diego A.]

I think that problem may be that the jQuery UI plugins has been
developed to stick together when the truth is, not everyone is gonna
be using every plugin.

I personally only use 2. It was easy enough to get the JS for each of
the plugins (downloaded the developers bundle), but I found it very
difficult to get the relevant css for each plugin because it wasn't
avaible on its own AND because it was only downloaded in a bundle,
with all other css, in the form of a theme (with a lot a unnecessary
css).

IMHO, there should be a separate css (where applicable) for every
plugin organized in the same way the .js files are organized. And When
downloading a theme, it would be useful to be able to choose which
plugins you need the css for.

These are just my personal suggestions. If nobody else is complaining
I'm sure it's because things are wokring fine as they are...

On Jul 1, 3:03 pm, Seth <seth.mcguinn...@...> wrote:

> I noticed that yesterday when I rolled a theme. Also, saw a spacing
> issue with the tabs and panel. Not sure if that has been mentioned
> before either.
>
> Seth
>
> On Jul 1, 7:04 am, "Diego A." <diego.a...@...> wrote:
>
> > Hi guys,
>
> > First of all, great work with the jQuery UI, library. Amazing!
> > Now for the bad news I'm afraid...
>
> > The code generated by the ThemeRoller has 3 references to the class
> > "ui-tabs-nav-item", but the plugin never adds that class to the
> > relevant elements.
>
> > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > missing class to the relevant elements (which is the proper way to fix
> > this IMHO).
>
> > Cheers,
> > Diego A.
>
> > PS.: I wasn't sure whether to post this message here or in the jQuery
> > Dev group. I hope this is ok here....

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Seth - TA]

I agree. I always thought it was odd that when creating your own
download build, there were no CSS files associated with the zip, only
the custom js file. Even if they don't want to include a custom css
file, there should be a "download css file" next to each chosen.

Side note: still haven't fixed the spacing issue in IE 6 for the tabs
and panel. Anyone experience this and able to fix it?

Seth

On Jul 1, 12:47 pm, "Diego A." <diego.a...@...> wrote:

> I think that problem may be that the jQuery UI plugins has been
> developed to stick together when the truth is, not everyone is gonna
> be using every plugin.
>
> I personally only use 2. It was easy enough to get the JS for each of
> the plugins (downloaded the developers bundle), but I found it very
> difficult to get the relevant css for each plugin because it wasn't
> avaible on its own AND because it was only downloaded in a bundle,
> with all other css, in the form of a theme (with a lot a unnecessary
> css).
>
> IMHO, there should be a separate css (where applicable) for every
> plugin organized in the same way the .js files are organized. And When
> downloading a theme, it would be useful to be able to choose which
> plugins you need the css for.
>
> These are just my personal suggestions. If nobody else is complaining
> I'm sure it's because things are wokring fine as they are...
>
> On Jul 1, 3:03 pm, Seth <seth.mcguinn...@...> wrote:
>
> > I noticed that yesterday when I rolled a theme. Also, saw a spacing
> > issue with the tabs and panel. Not sure if that has been mentioned
> > before either.
>
> > Seth
>
> > On Jul 1, 7:04 am, "Diego A." <diego.a...@...> wrote:
>
> > > Hi guys,
>
> > > First of all, great work with the jQuery UI, library. Amazing!
> > > Now for the bad news I'm afraid...
>
> > > The code generated by the ThemeRoller has 3 references to the class
> > > "ui-tabs-nav-item", but the plugin never adds that class to the
> > > relevant elements.
>
> > > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > > missing class to the relevant elements (which is the proper way to fix
> > > this IMHO).
>
> > > Cheers,
> > > Diego A.
>
> > > PS.: I wasn't sure whether to post this message here or in the jQuery
> > > Dev group. I hope this is ok here....
>
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Diego A.]

I'd go a bit further than "download css file". I think each plugin should have a slim version CSS, with everything it needs to works. Never mind colours and all that stuff. I think the "functionality CSS" needs to be separated from the "presentation CSS". Which makes sense since there's always new versions coming out...

2008/7/1 Seth <seth.mcguinness@...>:

I agree. I always thought it was odd that when creating your own
download build, there were no CSS files associated with the zip, only
the custom js file. Even if they don't want to include a custom css
file, there should be a "download css file" next to each chosen.

Side note: still haven't fixed the spacing issue in IE 6 for the tabs
and panel. Anyone experience this and able to fix it?

Seth

On Jul 1, 12:47 pm, "Diego A." <diego.a...@...> wrote:
> I think that problem may be that the jQuery UI plugins has been
> developed to stick together when the truth is, not everyone is gonna
> be using every plugin.
>
> I personally only use 2. It was easy enough to get the JS for each of
> the plugins (downloaded the developers bundle), but I found it very
> difficult to get the relevant css for each plugin because it wasn't
> avaible on its own AND because it was only downloaded in a bundle,
> with all other css, in the form of a theme (with a lot a unnecessary
> css).
>
> IMHO, there should be a separate css (where applicable) for every
> plugin organized in the same way the .js files are organized. And When
> downloading a theme, it would be useful to be able to choose which
> plugins you need the css for.
>
> These are just my personal suggestions. If nobody else is complaining
> I'm sure it's because things are wokring fine as they are...
>
> On Jul 1, 3:03 pm, Seth <seth.mcguinn...@...> wrote:
>
> > I noticed that yesterday when I rolled a theme. Also, saw a spacing
> > issue with the tabs and panel. Not sure if that has been mentioned
> > before either.
>
> > Seth
>
> > On Jul 1, 7:04 am, "Diego A." <diego.a...@...> wrote:
>
> > > Hi guys,
>
> > > First of all, great work with the jQuery UI, library. Amazing!
> > > Now for the bad news I'm afraid...
>
> > > The code generated by the ThemeRoller has 3 references to the class
> > > "ui-tabs-nav-item", but the plugin never adds that class to the
> > > relevant elements.
>
> > > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > > missing class to the relevant elements (which is the proper way to fix
> > > this IMHO).
>
> > > Cheers,
> > > Diego A.
>
> > > PS.: I wasn't sure whether to post this message here or in the jQuery
> > > Dev group. I hope this is ok here....
>
>

--
Cheers,
Diego A.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Matt-206]

I am experiencing the same thing. Thanks for bringing this up. I agree
it seems the most logical way to fix this is to have ui.tabs add the
missing class to the relevant elements.

Matt

On Jul 1, 5:04 am, "Diego A." <diego.a...@...> wrote:

> Hi guys,
>
> First of all, great work with the jQuery UI, library. Amazing!
> Now for the bad news I'm afraid...
>
> The code generated by the ThemeRoller has 3 references to the class
> "ui-tabs-nav-item", but the plugin never adds that class to the
> relevant elements.
>
> Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> missing class to the relevant elements (which is the proper way to fix
> this IMHO).
>
> Cheers,
> Diego A.
>
> PS.: I wasn't sure whether to post this message here or in the jQuery
> Dev group. I hope this is ok here....

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Matt-206]

I am experiencing the same thing. Thanks for bringing this up. I agree
it seems the most logical way to fix this is to have ui.tabs add the
missing class to the relevant elements.

Matt

On Jul 1, 5:04 am, "Diego A." <diego.a...@...> wrote:

> Hi guys,
>
> First of all, great work with the jQuery UI, library. Amazing!
> Now for the bad news I'm afraid...
>
> The code generated by the ThemeRoller has 3 references to the class
> "ui-tabs-nav-item", but the plugin never adds that class to the
> relevant elements.
>
> Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> missing class to the relevant elements (which is the proper way to fix
> this IMHO).
>
> Cheers,
> Diego A.
>
> PS.: I wasn't sure whether to post this message here or in the jQuery
> Dev group. I hope this is ok here....

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Klaus Hartl-4]

Why adding a class and more overhead to the plugin where it's just
required to change the CSS? I don't think I want that classitis for
the Tabs plugin - there's enough context to style elements properly.

--Klaus


On Jul 2, 8:05 pm, Matt <matt.critch...@...> wrote:

> I am experiencing the same thing. Thanks for bringing this up. I agree
> it seems the most logical way to fix this is to have ui.tabs add the
> missing class to the relevant elements.
>
> Matt
>
> On Jul 1, 5:04 am, "Diego A." <diego.a...@...> wrote:
>
> > Hi guys,
>
> > First of all, great work with the jQuery UI, library. Amazing!
> > Now for the bad news I'm afraid...
>
> > The code generated by the ThemeRoller has 3 references to the class
> > "ui-tabs-nav-item", but the plugin never adds that class to the
> > relevant elements.
>
> > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > missing class to the relevant elements (which is the proper way to fix
> > this IMHO).
>
> > Cheers,
> > Diego A.
>
> > PS.: I wasn't sure whether to post this message here or in the jQuery
> > Dev group. I hope this is ok here....

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Seth - TA]

Thanks for chiming in on this Klaus. Always good to hear from the
author. I think Matt was a bit off on what the subject was. I thinkn
Diego and I, who are experiencing some CSS issues regarding tabs and
the css that themeRoller is sending out. And, from what I can tell,
themeroller is the only place on the ui.jquery.com site to get CSS. I
love the concept of themeroller, however, I do know that like myself,
others are using only a few ui features, rather than all of them.

My suggestion, which I made before, was to allow individual basic CSS
files for each ui element and allow the developer to combine into one
CSS file if they like. Or if the developer downloads the entire ui,
then one CSS is just fine. To me that makes sense, but maybe there are
counters to that as well. Anyway, just my two sense.

Klaus, have you seen the IE6 issue I was talking about earlier in this
thread? There seems to be some spacing issues with the CSS generated
by themeroller in IE6.

Seth

On Jul 2, 7:23 pm, Klaus Hartl <klaus.ha...@...> wrote:

> Why adding a class and more overhead to the plugin where it's just
> required to change the CSS? I don't think I want that classitis for
> the Tabs plugin - there's enough context to style elements properly.
>
> --Klaus
>
> On Jul 2, 8:05 pm, Matt <matt.critch...@...> wrote:
>
> > I am experiencing the same thing. Thanks for bringing this up. I agree
> > it seems the most logical way to fix this is to have ui.tabs add the
> > missing class to the relevant elements.
>
> > Matt
>
> > On Jul 1, 5:04 am, "Diego A." <diego.a...@...> wrote:
>
> > > Hi guys,
>
> > > First of all, great work with the jQuery UI, library. Amazing!
> > > Now for the bad news I'm afraid...
>
> > > The code generated by the ThemeRoller has 3 references to the class
> > > "ui-tabs-nav-item", but the plugin never adds that class to the
> > > relevant elements.
>
> > > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > > missing class to the relevant elements (which is the proper way to fix
> > > this IMHO).
>
> > > Cheers,
> > > Diego A.
>
> > > PS.: I wasn't sure whether to post this message here or in the jQuery
> > > Dev group. I hope this is ok here....
>
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Diego A.]

Hi Klaus,

Thank you very much for getting involved in this conversation.

Of course, there's enough context to style everything properly, BUT, there's some inconsistency within the plugin, the css and the jQuery UI distribution. I ran into this problem yesterday:

1. I downloaded a style sheet using the jQuery UI theme builder.
2. The CSS included 3 rules for ".ui-tabs-nav-item"
3. But the plugin doesn't add the "ui-tabs-nav-item" class
4. So I changed the rules to ".ui-tabs-nav li"
5. The change broke the plugin functionality because ".ui-tabs-nav li" rules took priority over ".ui-tabs-nav-selected" rules.
6. I had to add !important to the ".ui-tabs-nav-selected" rules to make it all work

It's easy enough to make a few CSS changes, but this may cause deeper problems in the future and cause conflicts between the distribution and people's own stylesheets.

I understand your reservation to adding a class (and more overhead) to the plugin, but the code needs to be consistent with the CSS, specially now that jQuery.tabs is part of of a collection of plugins (jQuery.UI).

Every rule for the tabs plugin in the jQueryUI distribution consists of one class name. If some of the rules have to be written with 2 levels, such as '".ui-tabs-nav li" instead of "ui-tabs-nav-item" this will lead to unexpected behaviour and I can see how many users will get very confused as to why their rules aren't being obeyed...

ALTERNATIVELY,
changing the CSS from ".ui-tabs-selected" to ".ui-tabs-nav li.ui-tabs-selected" should work just as well and would incur no overhead.

What d'ya say?

Cheers,
Deigo A.

2008/7/3 Klaus Hartl <klaus.hartl@...>:

Why adding a class and more overhead to the plugin where it's just
required to change the CSS? I don't think I want that classitis for
the Tabs plugin - there's enough context to style elements properly.

--Klaus

On Jul 2, 8:05 pm, Matt <matt.critch...@...> wrote:
> I am experiencing the same thing. Thanks for bringing this up. I agree
> it seems the most logical way to fix this is to have ui.tabs add the
> missing class to the relevant elements.
>
> Matt
>
> On Jul 1, 5:04 am, "Diego A." <diego.a...@...> wrote:
>
> > Hi guys,
>
> > First of all, great work with the jQuery UI, library. Amazing!
> > Now for the bad news I'm afraid...
>
> > The code generated by the ThemeRoller has 3 references to the class
> > "ui-tabs-nav-item", but the plugin never adds that class to the
> > relevant elements.
>
> > Either, the ThemeRoller needs to be updated OR ui.tabs should add the
> > missing class to the relevant elements (which is the proper way to fix
> > this IMHO).
>
> > Cheers,
> > Diego A.
>
> > PS.: I wasn't sure whether to post this message here or in the jQuery
> > Dev group. I hope this is ok here....

--
Cheers,
Diego A.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Klaus Hartl-4]

On Jul 3, 6:42 pm, "Diego A." <diego.a...@...> wrote:

> Hi Klaus,
>
> Thank you very much for getting involved in this conversation.
>
> Of course, there's enough context to style everything properly, BUT, there's
> some inconsistency within the plugin, the css and the jQuery UI
> distribution. I ran into this problem yesterday:
>
> 1. I downloaded a style sheet using the jQuery UI theme builder.
> 2. The CSS included 3 rules for ".ui-tabs-nav-item"
> 3. But the plugin doesn't add the "ui-tabs-nav-item" class
> 4. So I changed the rules to ".ui-tabs-nav li"
> 5. The change broke the plugin functionality because ".ui-tabs-nav li" rules
> took priority over ".ui-tabs-nav-selected" rules.
> 6. I had to add !important to the ".ui-tabs-nav-selected" rules to make it
> all work
>
> It's easy enough to make a few CSS changes, but this may cause deeper
> problems in the future and cause conflicts between the distribution and
> people's own stylesheets.
>
> I understand your reservation to adding a class (and more overhead) to the
> plugin, but the code needs to be consistent with the CSS, specially now that
> jQuery.tabs is part of of a collection of plugins (jQuery.UI).
>
> Every rule for the tabs plugin in the jQueryUI distribution consists of one
> class name. If some of the rules have to be written with 2 levels, such as
> '".ui-tabs-nav li" instead of "ui-tabs-nav-item" this will lead to
> unexpected behaviour and I can see how many users will get very confused as
> to why their rules aren't being obeyed...

How is that? The ul has the class "ui-tabs-nav" and can only contain
tab items. Thus I don't see how this is confusing and can lead to any
problems. This is also the way it is done in all the existing theme
style sheets and there has never been a single problem with that.

If it was just HTML it would look like this:

<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item">...</li>
    <li class="ui-tabs-nav-item">...</li>
</ul>

which is a perfect example of so called classitis. It's just not
necessary. In the end it makes things more complicated. If for example
- which is often asked for on the list - one wants to prevent a FOUC I
advise to add the neccessary class to the ul. That's fairly easy, but
not any longer if I have to explain to add another class to the li
elements. Besides the overhead I already mentioned.

I totally agree that this needs to be fixed. But it needs to be fixed
in the Themeroller generated CSS. I wasn't involved in this at all -
and haven't been asked - but I really wonder a bit why the additional
class names were added in the first place and why the existing theme
style sheets were not used as a template for what's going to be
generated.

I will check whom to contact for these fixes.


--Klaus

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Klaus Hartl-4]

On Jul 3, 4:29 pm, Seth <seth.mcguinn...@...> wrote:

> Thanks for chiming in on this Klaus. Always good to hear from the
> author. I think Matt was a bit off on what the subject was. I thinkn
> Diego and I, who are experiencing some CSS issues regarding tabs and
> the css that themeRoller is sending out. And, from what I can tell,
> themeroller is the only place on the ui.jquery.com site to get CSS. I
> love the concept of themeroller, however, I do know that like myself,
> others are using only a few ui features, rather than all of them.
>
> My suggestion, which I made before, was to allow individual basic CSS
> files for each ui element and allow the developer to combine into one
> CSS file if they like. Or if the developer downloads the entire ui,
> then one CSS is just fine. To me that makes sense, but maybe there are
> counters to that as well. Anyway, just my two sense.
>
> Klaus, have you seen the IE6 issue I was talking about earlier in this
> thread? There seems to be some spacing issues with the CSS generated
> by themeroller in IE6.

Could you create a ticket for this? Sounds like missing hasLayout on
the ul element. You could do a quick check by adding "zoom: 1" for .ui-
tabs-nav ...


--Klaus
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Giuliano Marcangelo]

I have to concur with Klaus, the classes that Klaus provided are sufficient to style the tabs, perfectly........

you know when things are pretty much perfect, when you can no longer remove any superfluous CSS without affecting your ability to style the tabs........

the addition of extra REDUNDANT classes, does nothing whatsoever to enhance your ability to style the tabs.............

It appears that theme roller is targeted towards users who do not or cannot devise their own CSS schema, but in the process seems to make the entire subject of CSS styling MORE complicated rather than less, as I think this and other threads concerning theme roller show.

Take a step back and use Klaus's original CSS....it is good....very good....

:-)

2008/7/4 Klaus Hartl <klaus.hartl@...>:

On Jul 3, 6:42 pm, "Diego A." <diego.a...@...> wrote:
> Hi Klaus,
>
> Thank you very much for getting involved in this conversation.
>
> Of course, there's enough context to style everything properly, BUT, there's
> some inconsistency within the plugin, the css and the jQuery UI
> distribution. I ran into this problem yesterday:
>
> 1. I downloaded a style sheet using the jQuery UI theme builder.
> 2. The CSS included 3 rules for ".ui-tabs-nav-item"
> 3. But the plugin doesn't add the "ui-tabs-nav-item" class
> 4. So I changed the rules to ".ui-tabs-nav li"
> 5. The change broke the plugin functionality because ".ui-tabs-nav li" rules
> took priority over ".ui-tabs-nav-selected" rules.
> 6. I had to add !important to the ".ui-tabs-nav-selected" rules to make it
> all work
>
> It's easy enough to make a few CSS changes, but this may cause deeper
> problems in the future and cause conflicts between the distribution and
> people's own stylesheets.
>
> I understand your reservation to adding a class (and more overhead) to the
> plugin, but the code needs to be consistent with the CSS, specially now that
> jQuery.tabs is part of of a collection of plugins (jQuery.UI).
>
> Every rule for the tabs plugin in the jQueryUI distribution consists of one
> class name. If some of the rules have to be written with 2 levels, such as
> '".ui-tabs-nav li" instead of "ui-tabs-nav-item" this will lead to
> unexpected behaviour and I can see how many users will get very confused as
> to why their rules aren't being obeyed...

How is that? The ul has the class "ui-tabs-nav" and can only contain
tab items. Thus I don't see how this is confusing and can lead to any
problems. This is also the way it is done in all the existing theme
style sheets and there has never been a single problem with that.

If it was just HTML it would look like this:

<ul class="ui-tabs-nav">
   <li class="ui-tabs-nav-item">...</li>
   <li class="ui-tabs-nav-item">...</li>
</ul>

which is a perfect example of so called classitis. It's just not
necessary. In the end it makes things more complicated. If for example
- which is often asked for on the list - one wants to prevent a FOUC I
advise to add the neccessary class to the ul. That's fairly easy, but
not any longer if I have to explain to add another class to the li
elements. Besides the overhead I already mentioned.

I totally agree that this needs to be fixed. But it needs to be fixed
in the Themeroller generated CSS. I wasn't involved in this at all -
and haven't been asked - but I really wonder a bit why the additional
class names were added in the first place and why the existing theme
style sheets were not used as a template for what's going to be
generated.

I will check whom to contact for these fixes.


--Klaus

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Diego A.]

Hi Klaus,

This isn't a discussion about the ability to style tabs. Like I said, changing the incorrect CSS from ".ui-tabs-nav-item" to ".ui-tabs-nav li" causes unexpected behaviour in the css because you have to use !important to override the rules. Consider this:

<style>
.ui-tabs-nav li{ color:red; }
.ui-tabs-nav-selected{ color:blue; }
</style>
<ul class="ui-tabs-nav">
   <li>This is red</li>

   <li class="ui-tabs-nav-selected">This should be blue but it's still red because the second rule did not overwrite the first rule</li>
</ul>

I agree that we shouldn't add REDUNDANT classes, BUT I think the CSS should follow a pattern that would not require !important to be used.

I think instead of:
.ui-tabs-nav-selected{ ... }

...the css should be:
.ui-tabs-nav li.ui-tabs-nav-selected{ ... }

NOT so people can style the tabs (that's not the point), but so that there are no inconsistencies between the distributions and people's own CSS.

Cheers,
Diego A.

2008/7/4 Klaus Hartl <klaus.hartl@...>:

On Jul 3, 6:42 pm, "Diego A." <diego.a...@...> wrote:
> Hi Klaus,
>
> Thank you very much for getting involved in this conversation.
>
> Of course, there's enough context to style everything properly, BUT, there's
> some inconsistency within the plugin, the css and the jQuery UI
> distribution. I ran into this problem yesterday:
>
> 1. I downloaded a style sheet using the jQuery UI theme builder.
> 2. The CSS included 3 rules for ".ui-tabs-nav-item"
> 3. But the plugin doesn't add the "ui-tabs-nav-item" class
> 4. So I changed the rules to ".ui-tabs-nav li"
> 5. The change broke the plugin functionality because ".ui-tabs-nav li" rules
> took priority over ".ui-tabs-nav-selected" rules.
> 6. I had to add !important to the ".ui-tabs-nav-selected" rules to make it
> all work
>
> It's easy enough to make a few CSS changes, but this may cause deeper
> problems in the future and cause conflicts between the distribution and
> people's own stylesheets.
>
> I understand your reservation to adding a class (and more overhead) to the
> plugin, but the code needs to be consistent with the CSS, specially now that
> jQuery.tabs is part of of a collection of plugins (jQuery.UI).
>
> Every rule for the tabs plugin in the jQueryUI distribution consists of one
> class name. If some of the rules have to be written with 2 levels, such as
> '".ui-tabs-nav li" instead of "ui-tabs-nav-item" this will lead to
> unexpected behaviour and I can see how many users will get very confused as
> to why their rules aren't being obeyed...

How is that? The ul has the class "ui-tabs-nav" and can only contain
tab items. Thus I don't see how this is confusing and can lead to any
problems. This is also the way it is done in all the existing theme
style sheets and there has never been a single problem with that.

If it was just HTML it would look like this:

<ul class="ui-tabs-nav">
   <li class="ui-tabs-nav-item">...</li>
   <li class="ui-tabs-nav-item">...</li>
</ul>

which is a perfect example of so called classitis. It's just not
necessary. In the end it makes things more complicated. If for example
- which is often asked for on the list - one wants to prevent a FOUC I
advise to add the neccessary class to the ul. That's fairly easy, but
not any longer if I have to explain to add another class to the li
elements. Besides the overhead I already mentioned.

I totally agree that this needs to be fixed. But it needs to be fixed
in the Themeroller generated CSS. I wasn't involved in this at all -
and haven't been asked - but I really wonder a bit why the additional
class names were added in the first place and why the existing theme
style sheets were not used as a template for what's going to be
generated.

I will check whom to contact for these fixes.


--Klaus

--
Cheers,
Diego A.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---