CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsafari
Muiter
Muiter

Reputation: 1520

Bootstrap column + vertical tabs in Safari is disturbed

To start, I don't (and happy about it) own anything from Apple. But that faces me also with an problem, now it seems an new website is not correctly displayed when viewed with Apple's Safari browser. There are tools online to view an website in different browsers and OS but it is hard te find the problem then. So I am hoping someone here has any experience with this issue and knows how to solve this.

This image was send by one of my clients

But it should look like (https://torza.nl/portfolio_torza.php)

I think it is an css issue. This is the tabs css

.ui-tabs-vertical {
    width: 75em; 
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12.5em;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 4px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; }

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
}

.ui-tabs .ui-tabs-nav {
    background:#FFFFFF !important;
    border: none;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  padding-left: 2px !important;
  width: 100% !important;
}

I have tried to remove class d-flex because that was the issue on another page of the same website. But that was not the solution.

Page 

  <div class="col-lg-12 about-content">

    <div id="tabs" style="border: none;">

      <div class="row">
          <div class="col-lg-2">
              <ul>

                <?php foreach($menu_array as $menu){ $i++; echo '<li><small><a href="#tabs-'.$i.'"><span style="display:inline-block; width:155px;">'.$menu[1].' '.$menu[2].'</span></a></small></li>'; } ?>

              </ul>
          </div>

          <div class="col-lg-10">

             <?php foreach($menu_array as $menu) { $j++; echo '<div id="tabs-'.$j.'">';

                $title = $menu[2];

                include('includes/header_portfolio_torza_web.php');

                if(file_exists('includes/portfolio_torza/page_'.$menu[0].'.php')) { include('includes/portfolio_torza/page_'.$menu[0].'.php'); }
                else { include('includes/portfolio_torza/page_00.php'); }

                include('includes/footer_portfolio_torza_web.php');

                echo '</div>';
             }
             ?>

         </div>

    </div>

  </div>

One of the included pages:

<div class="row">

    <?php
    if($title == '') { echo '<div class="col-lg-12 d-flex flex-column justify-content-center"><h1 class="text-center">'.$pdf_title.'</h1></div>'; }
    ?>

    <div class="col-lg-12 d-flex flex-column justify-content-center">

        <p class="description" style="font-size: 14px;">
        Tegenwoordig versturen veel bedrijven online nieuwsbrieven naar hun klanten en werknemers. Deze nieuwsbrieven informeren lezers over updates binnen het bedrijf en leveren informatie die eraan verbonden is. Bovendien spelen nieuwsbrieven een rol in het opbouwen en in stand houden van de relaties met klanten<br >
        <br />
        In het Torza systeem is het mogelijk om elke aangemaakte contactpersoon direct toe te voegen aan een externe nieuwsbriefservice, zoals Mailchimp.
        </p>

    </div>

</div>

Upvotes: 0

Views: 393

Answers (1)

Victor Ivanov
Victor Ivanov

Reputation: 126

Ok, it's been a while since I used Bootstrap, but assuming you have ability to edit the markup, change <div class="col-lg-10"> to <div class="col-lg-10" style="margin-right:-1px;">

This solves it for me (using devtools).

Upvotes: 1

Related Questions