9 Replies Latest reply: Jun 20, 2014 7:18 PM by Liam Dilley RSS

    how do i make web app list horizontal

    BigBroBiggs Community Member

      So I have the list  and I only want 2 ( in this case ) to appear side by side but it keeps listing them vertically on top of each other... any solutions to rectifying this?

        • 1. Re: how do i make web app list horizontal
          Dave Black Community Member

          Care to post a link to this page- it is like an HTML and or CSS issue.

          • 2. Re: how do i make web app list horizontal
            BigBroBiggs Community Member

            my site is www.fatratwraps.com  This is embarrassing as I have been a BC Partner since before Adobe came into the picture... so you would think that I would be giving the advice...

             

            I fixed the issue ( I think ) but it still confuses me why what I did worked.

             

            It starts off with the term ROW. To me in my mind a row goes horizontally. So when I set up the tag for placing the latest WebApp items I said 2 items 1 ROW thinking that it would place the 2 items on the one row.... instead it place 1 time in two rows so the items where presented one on top of the other.

             

            I changed it to 2 items 2 ROWS and with only two items in my database it is rendering like it should... I am going to make up another item to make sure it only show the two.

            • 3. Re: how do i make web app list horizontal
              BigBroBiggs Community Member

              Dave, I just added a third item...and the issue I am faced with is the pagination. I really don't want it to show any pagination JUST the last two articles... which it is showing the first to...

              • 4. Re: how do i make web app list horizontal
                Dave Black Community Member

                Simply hide the pagination with this css:

                 

                 

                ul#webapp11809pagination{

                display: none;

                }

                • 5. Re: how do i make web app list horizontal
                  BigBroBiggs Community Member

                  Thanks Dave, will this also affect the pagination then on the larger list page?  See News page on site. www.fatratwraps.com/news.html

                  • 6. Re: how do i make web app list horizontal
                    BigBroBiggs Community Member

                    Also I figured out as you can see the issue with listing the newest first... by adding "date" at the end of the module tag as in {module_webapps,11809,a,,,,,5,,1,date}

                    • 7. Re: how do i make web app list horizontal
                      Dave Black Community Member

                      It more than likely will, therefore, since the list on the home page is inside a div with a class of 'eight', change the css like:

                       

                      .eight ul#webapp11809pagination {

                      display: none;

                      }

                       

                      Alternativley, you can add a unique class to the home page 'eight' div so you are sure there won't be any issues:

                       

                      . myUniqueClass ul#webapp11809pagination {

                      display: none;

                      }

                      • 8. Re: how do i make web app list horizontal
                        BigBroBiggs Community Member

                        I have directed the code using Fire Bug and then placed it along side the Pagination for the design of my template... This is for the list on the NEWS page.

                         

                        Using your suggestion but in reverse could I use ...

                         

                        nav .pagination ul#webapp11809pagination {

                        display: none;

                        }

                         

                        {module_webapps,11809,a,,,,,5,,1,date}

                          <!-- Pagination -->

                          <nav class="pagination">

                          <ul>

                          <li><a href="#" class="current">1</a></li>

                          <li><a href="#">2</a></li>

                          <li><a href="#">Next</a></li>

                          </ul>

                          <div class="clearfix"></div>

                          </nav>

                         

                        <!-- BC Generated Code

                        <ul id="webapp11809pagination" class="pagination webapp">

                        <li class="pag-current">1</li>

                        <li class="pag-number">

                        <a href="/Default.aspx?PageID=4189729&A=WebApp&CCID=11809&Page=2&Items=2">2</a>

                        </li>

                        <li class="pag-next">

                        <a href="/Default.aspx?PageID=4189729&A=WebApp&CCID=11809&Page=2&Items=2">Next</a>

                        </li>

                        </ul> -->

                        • 9. Re: how do i make web app list horizontal
                          Liam Dilley CommunityMVP

                          You do not put CSS inline into HTML, it needs to go into CSS stylesheet or inline style tags. You can not put your own pagination to control html, You can only use and style the BC pagination.