1

I want to display different content (tables, masks, etc.) in several different areas ("columns") on the website. Typically, the left is a list, in the middle details of an entry and on the right notes, help, details. (Since there are more than 500 masks and lists (with datatables.js), I cannot define anything statically). If necessary, only 1 or 2 areas are visible. (Also depending on the viewport) The width of the areas should be adjustable by the user (and of course they should be based on the total available space). Therefore I plan to use split.js (https://split.js.org/) The individual areas should now adapt to the available space in the area (and no longer to the viewport). This means that the media query should actually refer to the area (<div>) and no longer to the viewport. But the function does not exist in this way.

First idea is to define the formats for the respective widths in SCSS mixins and use the Bootstrap Mixin. In the mediaqueries I would then use a width class for the current width (the class is then set dynamically via JS / Hook from split.js + Event Window Size Change) for the mixins. The resize events are a disadvantage of course. Also I have to build a lot of things manually.

<div>
    <div class="split" id="one"></div>
    <div class="split" id="two"><</div>
</div>
------------
@mixin one_xs {@include make-col($size, $columns: $grid-columns) } /*style for small list */
@mixin one_sd {..}
@mixin one_md {..}
@mixin one_lg {..}

@mixin two_xs {..}
@mixin two_sd {..}
@mixin two_md {..}
@mixin two_lg {..}


@include media-breakpoint-up(xs) {
    @include one_xs;
    #two { display: none}
}
…

@include media-breakpoint-up(lg) {
    #one .detect_xs {@include one_xs;}
    #one .detect_sd {@include one_sd;}
    #one .detect_lg {@include one_lg;}
    #two .detect_xsmall {@include two_xs;}
    …
}

<script> 
Split(['#one', '#two']);
...
window.addEventListener('resize', function() {
…
if ( $('#one').width() ) > 1024) { 
$('#one').AddClass(".detect_md");
…
}

Would this work (well?)? Are there other approaches how this can be (better) implemented (don't need complete code, just ideas). (Split.js / bootstrap are not mandatory)

mkours
  • 390
  • 2
  • 11

1 Answers1

0

Finally if find a solution:

https://codepen.io/MichaelBootstrap/pen/vYLrzVE

Its combines:

The Answer of that question: jQuery UI Resizable alsoResize reverse

The lib: https://marcj.github.io/css-element-queries/

and jquery, bootstrap & datatables. (I don't use split.js)

You can use in every tab bootstrap, datatables in any way (full responsible) and create you own CCS-Rules on:

.your-tab[min-width~="400px"] h2 {
    font-size: 18px;
}

together with bootstrap mixin:

.your-tab[min-width~="400px"] h2 {
    @include make-col($size, $columns: $grid-columns)
}

Works fine. Please note, that the deaktivition of tabs in that example does not work propper (Hard coded only for the second tab).

mkours
  • 390
  • 2
  • 11