0

I am having trouble getting jQuery UI Tabs to behave the way I need them to. In Chrome and Firefox they function fine. It's IE7 where I am having trouble, IE7 is a must.

Problem: Shown in the image below, if many tabs are opened, the tab at the end of the rows text is cut off. Also, the close 'X' manages its way under the tab title. With the tabs sitting in picture 1 like they are, I can make the width of the browser smaller and the tabs finds its way on a seconds row, as show in the lower image.

I set the width to a minimum which fixed a problem I was having. The problem was that if the row was filled with tabs the next couple of open tabs titles would only be ~3-5 pixels wide. Pretty much not visible. I'm lost as to what to do.

Can only post a link:

http://postimage.org/image/k736znm4l/

I have recreated my part of my problem in jsFiddle: http://jsfiddle.net/DbnTt/2/

Add many tabs, the resize the window slowly and watch the farthest most right tab on the top row. The close button moves below the title on the left hand side. I am using IE7.

juicebyjustin
  • 434
  • 7
  • 16
  • Tested here: http://jsfiddle.net/JbHwJ/ ... i can't reproduce the problem in IE. If you added some custom CSS, could you try to reproduce it? – Marco Johannesen Apr 17 '12 at 18:22
  • I don't think I have added custom CSS. I will work to reproduce it and replace my CSS with the current UI CSS. Thanks for the jsFiddle. – juicebyjustin Apr 17 '12 at 20:29
  • Might be simple styling to global elements or something. Is the JsFiddle working right in your IE too? :) – Marco Johannesen Apr 17 '12 at 20:35
  • It is working in my IE, although I cannot re-size any of the jsFiddle windows. Can you explain more about your theory of the global elements? Found a few articles to reset global CSS elements. They didn't help out. – juicebyjustin Apr 17 '12 at 20:38
  • Are you using a "reset" css style or something which might change the default behaviour or something? Why can't you resize the window? -_- – Marco Johannesen Apr 17 '12 at 20:43
  • Marco, I'm not sure how you get updates or look for update information in this post. I recreated my problem and edited my question with jsFiddle link. – juicebyjustin Apr 17 '12 at 21:17
  • It seems it got problems with the CSS `white-space:nowrap` when added dynamicly.. Ill see if i can find a fix tomorrow :) – Marco Johannesen Apr 17 '12 at 21:56
  • @JMooney Your problem is caused by a css float issue. Your tab content container is realized by a parent
  • element. The tab text is an anchor while the tab close button is a . Both the anchor and the span have float:left specified. This will cause them to wrap automatically when space is short. A less than ideal way to solve this problem is to apply a minimum width to your parent
  • , which will cause the wrapping behavior to go away. However, since the minimum width is not fixed for your case, the solution is not ideal so I didn't post it as an answer.
    • – Bojin Li Apr 17 '12 at 22:00