css + thymeleaf - How to auto-adjust displayed screen size?

Tags: html,css,thymeleaf

Problem :

In my application, I have a default fragment that builds all others. It is transcribed bellow:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="@{/assets/img/favicon.png}"  type="image/x-icon" />
<title th:text="#{app.name}"> </title>
<style> #sidebar-and-content { display: flex; height: 100vh; width: 100%; } .page-body { display: -webkit-flex; display: flex; height: 100vh; width: 100%; overflow: auto; } </style></head>
    <div th:id="defaultFragment" th:fragment="defaultFragment">
        <div id="header" th:replace="fragments/header :: headerFragment">   </div>
        <div class="main-container container-fluid">
            <div  id="sidebar-and-content" class="page-container">
                <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
                <div id="content" class="page-content">
                    <div class="page-body">
                        <section layout:fragment="content"></section>
                <div th:replace="fragments/footer :: footerFragment"></div>

All the application pages are built like this:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"

<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <div layout:fragment="content">
        <div class="container">
            <script type="text/javascript">

Say on the I have a table with many rows, on my 1920x1080 laptop screen, most of the time it is built correctly, but on 1366x768 screens it gets build like the first image bellow:

enter image description here

There's a button that collapses the sidebar menu. Ideally I'd like the now bigger screen to resize the table. Instead (again on 1366x768 screen) I get the following:

enter image description here

know this is likely a CSS matter, but how can I fix it?

Solution :

Actually, it was a "problem" in the datatable javascript. After some reading on the site, I found out there's the responsive extension. Once I got it figured out, it worked as a charm.

    CSS Howto..

    php css how to change name color based on membership?

    How to add css 3dtransform property with jquery to a dom element?

    How to get names of css classes of an element

    How to strike through obliquely with css

    how to see which CSS class is applied or where is that font-size coming from, from which class or tag

    css3 : how to make div go up to bottom of page?

    How to place div in top right hand corner of page

    CSS Position relative goes over fixed how to fix this?

    How slow is * css selector for mobile browsers?

    How to set the background image width using CSS?

    how can i update these css classes to generate a blue box behind the first letter of a word?

    How to re-size an image inserted via tag?

    Images don't show up in quiz results after start over button

    How to get the profile pic aligned center?

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to handle the html and css of one side image and other side content and vice versa

    php- How to strip CSS in the text

    Intellij IDEA 11: how can I compile .css from .less?

    How to change the Home icon in Primefaces Breadcrumb?

    How to disable CSS Class on particular DIV

    How to include a css stylesheet in Orchard module?

    How to make a pie chart in CSS

    How can I configure this gulpfile the right way to have a nice workflow

    How to add local css file to a page in WebView?

    How to hide a soft hyphen (­) in HTML / CSS

    How to give line-break from css, without using

    WebPack how to put all css files into one css file

    How to make image 3D using CSS

    css footer background didn't shows properly in html5

    How do I get Jquery to toggle display