8 Replies Latest reply: Jul 30, 2012 9:37 AM by steve_London RSS

    Can't fix the width of a tabbed panel tab

    steve_London Community Member

      Hi all,

      I have a Spry tabbed panel at:

      http://www.stevedrake.net/artworker [a WordPress based site].

      I've managed to centre the tabs but can't get them to stick with any width I apply in the CSS [currently 100px] and then have the tabs sit next to each other so there's no space between them. Any ideas where I'm going wrong?

      Thanks

      steve

      PS The way it looks in Safari is better than the way it looks in Firefox [something I'm still fiddling with].

        • 1. Re: Can't fix the width of a tabbed panel tab
          Ben Pleysier CommunityMVP

          Is this what you are looking for?

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title></title>
          <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
          <style>
          .TabbedPanelsTabGroup {
              width: 246px;
              margin: auto;
          }
          .TabbedPanelsTab {
              width: 100px;
          }
          </style>
          </head>
          
          <body>
          <div id="TabbedPanels1" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
              <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">Content 1</div>
              <div class="TabbedPanelsContent">Content 2</div>
            </div>
          </div>
          <script src="SpryAssets/SpryTabbedPanels.js"></script>
          <script>
          var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
          </script>
          </body>
          </html>
          

           

          The TabbedPanelsGroup is the container for the tabs. Rherefore it must be wide enough to house the tabs (including widths, margins and padding)

           

          A width has to be given to the container so that it can be centered.

           

          Gramps

          • 2. Re: Can't fix the width of a tabbed panel tab
            steve_London Community Member

            Hi Gramps,

            Thanks for the reply.

            I've tried your suggetsion [locally] and the individual tabs are still ignoring the applied CCS width.

            steve

            • 3. Re: Can't fix the width of a tabbed panel tab
              Ben Pleysier CommunityMVP

              I don't understand, it worked perfectly for me. I guess untill I see what you have done, I will not be able to tell you where you have gone wrong.

               

              Gramps

              • 4. Re: Can't fix the width of a tabbed panel tab
                steve_London Community Member

                Hi Gramps,

                I've altered the CSS on my web server [link in initial post] to include the suggested changes so you should see that I've added auto to the side margins of the TabbedPanelsTabGroup and given it a width of 450px. The tabs have a width of 100px.

                Where did I go wrong?

                Thanks.

                steve

                • 5. Re: Can't fix the width of a tabbed panel tab
                  Ben Pleysier CommunityMVP

                  KISS. Always remember that.

                   

                  You have already got the style rules for the tabs, but you want to give the first and the last tabs a slightly different style. What needs to be done is to only have the rules that change them from the normal tab as per

                  .TabbedPanelsTab.First {

                      border-top-left-radius: 4px;

                      -moz-border-radius-topleft: 4px;

                      -webkit-border-top-left-radius: 4px;

                  }

                  .TabbedPanelsTab.Last {

                      border-top-right-radius: 4px;

                      -moz-border-radius-topright: 4px;

                      -webkit-border-top-right-radius: 4px;

                  }

                  Now change the markup to reflect the selector as in

                  <li class="TabbedPanelsTab First">artworker</li>

                  <li class="TabbedPanelsTab">print</li>

                  <li class="TabbedPanelsTab">screen</li>

                  <li class="TabbedPanelsTab Last">samples</li>

                  Ok, I do sound confident that it will work, but in reality I'm not sure, so please give me your feedback.

                   

                  Gramps

                  • 6. Re: Can't fix the width of a tabbed panel tab
                    steve_London Community Member

                    Thanks Gramps,

                    Done as you suggest but still not able to implement the tab width but the KISS is good!

                    steve

                    • 7. Re: Can't fix the width of a tabbed panel tab
                      Ben Pleysier CommunityMVP

                      The only thing I can suggest is to get back to the basics.

                       

                      When I try my solution it does work, but I have stripped out a lot of the irrelevant stuff. Once you have it working, start adding the rest of the CSS and JS to see where it breaks down.

                       

                      If you still have problems, I'll have a deeper look.

                       

                      Gramps

                      • 8. Re: Can't fix the width of a tabbed panel tab
                        steve_London Community Member

                        Thanks Gramps,

                        I have the tabbed panels set up as a single page in Dreamweaver CS6 and I copy and paste the code into a php page that is the template for the live page in WordPress. The links to the css and js files are, obviously, inserted into the WP header.php file.

                        I did think that maybe the main site/WordPress css file was causing the issue so I commented out the link in the head section of the single tabbed panels page but it made no difference - the issue is seemingly within the css for the tabbed panels.

                        I'm off to Italy in a couple of day so, if not before, when I return I'll maybe make a new tabbed panel and get the tabs at a fixed width then start adding the other css as you suggest.

                        Thanks again.

                        steve