CODEWITHSUNDEEP
javascripthtmlcssvue.jsresponsive-design
amirify
amirify

Reputation: 805

how to make html elements respond to their parent viewport rather than browser viewport?

I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):

<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">

  <!-- Dynamically added component -->
  <div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
  
    
    <!-- UIKit Width classes -->
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
      <li>
        <img src="../../img/01.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>1</h1></div>
      </li>
      <li>
        <img src="../../img/02.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>2</h1></div>
      </li>
      <li>
        <img src="../../img/03.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>3</h1></div>
      </li>
      <li>
        <img src="../../img/04.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>4</h1></div>
      </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

  </div>
</div>

Upvotes: 2

Views: 776

Answers (1)

JO3-W3B-D3V
JO3-W3B-D3V

Reputation: 2134

Explanation

This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.

As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.

Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.

Edit

After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.

Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what @arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.

I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution. 

const clickHandler = txt => {
  let clName = '';

  switch (txt) {
    case 'Desktop':
      clName = 'desktop';
      break;
    case 'Tablet':
      clName = 'tablet';
      break;
    case 'Mobile':
      clName = 'mobile';
      break;
    default:
      clName = 'desktop';
  }

  document.getElementById("app").className = clName;
};

document.querySelectorAll("#sizes button").forEach(btn => {
  btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
  width: 100%;
  display: block;
  overflow: auto;
}

#sizes button {
  float: left;
  margin: 15px;
  padding: 15px;
  border: 1px solid black;
  background: white;
  box-sizing: border-box;
  width: calc(33.33% - 30px);
}

#app {
  height: 100vh;
  background: #eee;
}

#app.desktop {
  width: 960px;
}

#app.tablet {
  width: 700px;
}

#app.mobile {
  width: 320px;
}

.col-2 {
  display: block;
  overflow: auto;
}

.col-2>* {
  float: left;
  width: calc(50% - 30px);
  padding: 15px;
  margin: 15px;
  box-sizing: border-box;
  border: 1px solid black;
}


/* Just for a demo */

#redBlock {
  background: red;
  height: 100px;
  width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>

<div id="sizes">
  <button>Desktop</button>
  <button>Tablet</button>
  <button>Mobile</button>
</div>

<div id="app" class="desktop">
  <div class="col-2">
    <p>Hello</p>
    <p>World!</p>
  </div>

  <div id="redBlock"></div>

  <div uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light">
      <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>1</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>2</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>3</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>4</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>5</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>6</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>7</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>8</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>9</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>10</h1>
          </div>
        </li>
      </ul>

      <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
      <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

    </div>

    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
  </div>
</div>

Possible Solution

What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible. 

const clickHandler = txt => {
  const slider = document.getElementById("mySlider");
  let clName = '';

  switch (txt) {
    case 'Desktop':
      clName = 'desktop';
      slider.className = 'uk-slider-items uk-child-width-1-4';
      break;
    case 'Tablet':
      clName = 'tablet';
      slider.className = 'uk-slider-items uk-child-width-1-3';
      break;
    case 'Mobile':
      clName = 'mobile';
      slider.className = 'uk-slider-items uk-child-width-1-2';
      break;
    default:
      clName = 'desktop';
      slider.className = 'uk-slider-items uk-child-width-1-4';
  }

  document.getElementById("app").className = clName;
};

document.querySelectorAll("#sizes button").forEach(btn => {
  btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
  width: 100%;
  display: block;
  overflow: auto;
}

#sizes button {
  float: left;
  margin: 15px;
  padding: 15px;
  border: 1px solid black;
  background: white;
  box-sizing: border-box;
  width: calc(33.33% - 30px);
}

#app {
  height: 100vh;
  background: #eee;
}

#app.desktop {
  width: 960px;
}

#app.tablet {
  width: 700px;
}

#app.mobile {
  width: 320px;
}

.col-2 {
  display: block;
  overflow: auto;
}

.col-2>* {
  float: left;
  width: calc(50% - 30px);
  padding: 15px;
  margin: 15px;
  box-sizing: border-box;
  border: 1px solid black;
}


/* Just for a demo */

#redBlock {
  background: red;
  height: 100px;
  width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>

<div id="sizes">
  <button>Desktop</button>
  <button>Tablet</button>
  <button>Mobile</button>
</div>

<div id="app" class="desktop">
  <div class="col-2">
    <p>Hello</p>
    <p>World!</p>
  </div>

  <div id="redBlock"></div>

  <div uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light">
      <ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>1</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>2</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>3</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>4</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>5</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>6</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>7</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>8</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>9</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>10</h1>
          </div>
        </li>
      </ul>

      <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
      <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

    </div>

    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
  </div>
</div>

Upvotes: 2

Related Questions