CODEWITHSUNDEEP
csssafari
Murph_Fish
Murph_Fish

Reputation: 359

Alternative to absolute positioning in safari?

I need to start this one off by saying, I am not a front end web developer. I was thrown into it at a recent job and I am trying to make the best of what was left to me. I have a div that contains three vertically stacked buttons. It initially appears on the right hand side of a page next to a paragraph. When going mobile I just gave it a col-xs-12 with bootstrap which makes it appear above the paragraph at full width. This is exactly what I want however, safari seems to have other plans for that design. I'm failing to grasp an alternative that will suite all browsers and I was hoping I could get a second pair of eyes on this. I will attach pictures and css for clarity.

enter image description here

The picture above is how it looks on desktop with no css positioning applied to it and the structure looks like this

<div class="req-btn-container col-xs-12">
   <div><a></a></div>
   <div><a></a></div>
   <div><a></a></div>
</div>

Now below is a photo of how it looks on mobile view and how I would like it to look in safari as well. enter image description here

This was achieved by a media query at 1200px that sets 

div.req-btn-container{
        position:absolute;
        right:0px;
    }

And finally this is how it looks on safari... enter image description here

It may be kind of hard to see given the colors but basically the boxes on safari appear where the div would appear if it was not given a position of absolute (below the paragraph and not above) I also gave the paragraph a large margin top to make space for the boxes above the paragraph and on safari this top margin gap is not being rendered either. I have been reading that I should swap absolute for position:relative but when I do that I can't get the boxes to span the full width of the page. Any ideas? I hope I was as clear as I could be if not please let me know in the comments. Thanks!

Upvotes: 1

Views: 922

Answers (1)

tao
tao

Reputation: 90208

  1. make sure the direct parent of both sidebar and content has the class row
  2. add col-sm-9 col-xs-12 to the content element. Make sure you add the classes to the immediate child of .row
  3. add col-sm-3 col-xs-12 classes to the container of your buttons. (also direct child of parent .row and sibling of .col-sm-9.col-xs-12)
  4. Remove the CSS you quoted above from your CSS (remove position:absolute from .req-btn-container).

This will make the button sidebar switch from side to full-width layout at 768px (if you haven't modified your bootstrap.css). If you want it to switch at 992px, replace col-sm-*s above with col-md-*s.

 .btn-group-vertical {
    width: 100%;
    margin-top: 15px;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9 col-xs-12">
      Jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water and sometimes switches in french and say "miaou" just because well why not and then cats take over the world paw at your fat belly. Hide when guests come over. Scream at teh bath make meme, make cute face lick the curtain just to be annoying and meow all night having their mate disturbing sleeping humans my slave human didn't give me any food so i pooped on the floor, or sit on human eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Love to play with owner's hair tie peer out window, chatter at birds, lure them to mouth chase after silly colored fish toys around the house, kick up litter but pee in human's bed until he cleans the litter box meow chirp at birds.
    </div>
    <div class="req-btn-container col-sm-3 col-xs-12">
      <div class=" btn-group-vertical">
        <a class="btn btn-primary btn-group">Find a representative</a>
        <a class="btn btn-primary">Request a quote</a>
        <a class="btn btn-warning">Order parts</a>
    </div>
  </div>
</div>

Note: In my example I took the liberty to change the layout of your buttons, just to show you how they could have been coded the bootstrap way, using btn-group-vertical for the same functionality. It is not part of the solution, it's only informative. Also please note the CSS part of my solution is related to the use of btn-group-vertical, so it's also optional.

Upvotes: 1

Related Questions