Breadcrumb displaying in reverse order

7 posts by 2 authors in: Forums > CMS Builder
Last Post: October 10, 2017   (RSS)

By terryally - October 7, 2017

Hi Dave,

My breadcrumb is displaying in reverse order when I style it hroizontally. If I left it as an unordered list, it would be correct.

Rather than getting Projects >> 2015-2020 >> City >> Main Square. I am getting Main Square >> City >> 2015-2020 >> Projects.

How do I rectify this? My CMSB code is:

<?php
    $ThisPage = $_SERVER['REQUEST_URI'];
    $NumberOfHyphens = substr_count($ThisPage, "-");
    $ThisPageQueryString = explode("?", $ThisPage);
    if($NumberOfHyphens = 0) {
        $ProjName = $ThisPageQueryString[1];
    } else {
        $ProjName = str_replace("-", " ", $ThisPageQueryString[1]);
    }

  // load record from 'navigation_menu'
  list($navigation_menuRecords, $navigation_menuMetaData) = getRecords(array(
    'tableName'   => 'navigation_menu',
    'limit'       => '1',
    'where'=> 'name="'.$ProjName.'"',
  ));
  $navigation_menuRecord = @$navigation_menuRecords[0]; // get first record

  $CurrentPageNum = $navigation_menuRecord['num'];

  // load records from 'navigation_menu'
  list($navigation_menuRecords, $selectedNavigation_menu) = getCategories(array(
    'tableName'            => 'navigation_menu',
    'categoryFormat'       => 'breadcrumb', 
    'selectedCategoryNum'  => $CurrentPageNum,
  ));
?>

      <ul class="breadcrumb">
        <?php foreach ($navigation_menuRecords as $categoryRecord): ?>
          <?php echo $categoryRecord['_listItemStart'] ?>
      
          <?php if ($categoryRecord['_isSelected']): ?>
            <b><a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a></b>
          <?php else: ?>
            <a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
          <?php endif; ?>
      
          <?php echo $categoryRecord['_listItemEnd'] ?>
        <?php endforeach; ?>
      </ul>


 My CSS is:

    .breadcrumb li ul {
      display: inline;
      margin: 0;
      padding: 0;
      float: left;
    }
    .breadcrumb li {
      list-style-type: none;
    }
    .breadcrumb li ul li {
      padding-right: 10px;
    }
    .breadcrumb li ul li:after {
    content: " > ";
    font-weight: bold;
    font-size: 75%;
    font-family: 'Arial Black';
}


Thanks





By Mikey - October 9, 2017

Hey Dave,

Try this CSS style sheet and see if it works out your issue.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bread</title>

<style type="text/css">
    .breadcrumb {
        margin:0 auto;
        padding:0;
    }
    ul.breadcrumb, .breadcrumb li {
        list-style:none;
    }
    .breadcrumb li {
        margin:0;
        padding:0;
        display:inline-block;
    }
    .breadcrumb li {
    }
    .breadcrumb li a {
        text-decoration:none;
        text-transform:uppercase;
        padding:0.5em !important;
        color:#CC0000;
    }
    .breadcrumb li a:hover {
        color:#000000;
    }
    .breadcrumb li:after {
        content: " / ";
    }
</style>

</head>

<body>

<ul class="breadcrumb">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

</body>
</html>

Zicky

By terryally - October 10, 2017

Hi Zicky,

Your CSS does almost the same as mine except that it does not appear inline but as a list. After once I replace part of my original (below) to your CSS it makes it inline.

    .breadcrumb li ul {      display: inline;      margin: 0;      padding: 0;      float: left;    }

HOWEVER, the breadcrumb display generated by  CMSB still appears in reverse order. Clearly the solution has to be in the CSS which I cannot locate so I am wondering whether there is an equivalent to an orderBy where clause to make the breadcrumb appear in the correct sequence.

Thanks

Terry

By Mikey - October 10, 2017

View the source code from your browser, copy and paste into the thread, and I'll take a look at what the final results of what's generated and used on the web page displayed. That's where I would start to rectify the issues with the CSS, because it may be that something on the php generating the list is introducing additional ul and li elements.

By Mikey - October 10, 2017

Yea - I had a feeling float-left was the issue originally.

It really doesn't effect the actually CMSB output, but instead rearranges the outputted data in reverse because items where already displayed inline, and with float-left added it was reversing the display of data in the browser.

By terryally - October 10, 2017

It behaves differently in this instance to previous ones I've designed. But ... I used it primarily to float div's not nested lists.

Thanks for your help Zicky.