In my Spring MVC + Thymeleaf application, I have a default fragment that mounts the page. It is:
<!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>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
Some pages, specially those with very wide tables overspan the width of the visible area and not only looks bad, you have to move the browser "view port" with arrow keys. I'd like the content fragment to be auto adjustable.
How to to that?
You can use CSS overflow property to "hide" the overflowing content. Seet the width and overflow property of the element.
.page-body {
width: 800px;
overflow: hidden;
/* OR
overflow: scroll; */
}
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
Related
I am trying to use two container in row and with window resize they auto resize till md size and then stack up on each other
But I am having issues with controlling the image size in the container as it resizes rather than reducing with window size.
When i sample test they go well as below
but When i use image and content , it will resize and making an issue
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Three Column Grid Layouts for Tablets (landscape) and Desktops</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 15px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
<div class="text-center">Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works.</div>
<div class="container mt-3">
<!--Row with three equal columns-->
<div class="row">
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content bg-alt">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
</div>
<!--Row with three columns divided in 1:4:1 ratio-->
<div class="row">
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
<div class="col-lg-8">
<div class="demo-content bg-alt">.col-lg-8</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
<!--Row with three columns divided unevenly-->
<div class="row">
<div class="col-lg-3">
<div class="demo-content">.col-lg-3</div>
</div>
<div class="col-lg-7">
<div class="demo-content bg-alt">.col-lg-7</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
</div>
</body>
</html>
`
I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>
you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap
A display: block; using a css on one of this two element will be enought.
Indeed display: block tell a div to take all the width of the page.
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="" style="display:block;">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?
you can simply do with this float:left property, just check with this example
header {
float:left;
width:100%;
background: #c1c1c1; /* just for showing the header */
padding:15px;
}
.block-element {
float:left;
width:100%;
background: #ddd; /* just for showing the div */
padding:15px;
margin-top:30px;
}
<header>
<!-- something here -->
</header>
<div class="block-element">
<!-- something here -->
</div>
<div class="block-element">
<!-- something here -->
</div>
I'm trying to figure out how to set the order of my containers in a page so that they will correctly reorder themselves in both mobile and desktop layouts when resized.
Here is my code, the order is correct here in tablet [col-sm] & and phone [col-xs] views:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
The problem is for a desktop layout, there is a big gap under the 1st Nav div, the social div should be immediately beneath the 1st Nav in desktop and larger views regardless of the height of the content div.
How do I fix this? I tried using the pull, push, offset and float methods, but nothing gave me the correct results.
The gap that you are talking about is actually not a gap in the solid left column. It is a gap between content in the left column of first row and the left column of the second row.
Your last wrapping div (social/nav2/footer) is in the second row, so it can touch the first wrapping div (rider/search/nav1) from below only if the height of second wrapping div (headers/content) is less than of first (which is definitely not an option here).
To fix the problem, I'd suggest to put contents of last wrapping div into first one. However it will break the order in mobile and tablet layouts.
As the second option I could offer to duplicate contents of last wrapping div to first one, but make it visible only in desktop screen sizes by using .visible-md and .visible-lg classes on upper instance and to show the one below only in mobile screens (use .hidden-md .hidden-lg classes). This is not the best idea from performance standpoint (extra traffic, extra server-side processing) but it could work.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
<div class="visible-md visible-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12 hidden-md hidden-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style>
/* Custom container */
.container-fixed {
margin: 0 auto;
max-width: 800px;
min-width: 800px;
width: 800px;
background-color:#C05659;
}
.container-fixed > hr {
margin: 30px 0;
}
</style>
</head>
<body>
<div class="container-fixed">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<div class="container">
<div class="row">
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
</div>
</div>
Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<div class="container-fluid">
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>
I have been trying to get yui-css grid system to make a three column grid, where the first on (left) uses 1/4 of the space, the second (middle) uses 2/4 of the space and the third (right) uses 1/4 of the space.
Something like this:
| header |
-------- ------------------------
| left | middle | right |
--------------------------------
| footer |
Any input will be much appreciated.
UPDATE: Judging from the answers/comments, I realize some more info is needed.
The site has a fixed with (750px - #doc in YUI).
I am not really interested in none YUI solutions (thanks anyway), since I would love to start using YUI-CSS as a base framework, so this project I am doing is a test to see if it meets my needs. I like the fact that it works the same way across different browsers.
using yui solution is quite tricky :) but below is ur solution to 1/4, 2/4, 1/4 column layout
<body>
<div id="doc4" class="yui-t5">
<div id="hd">
</div> <!-- header -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gd">
<div class="yui-u first">
Left Column
</div> <!-- yui-u first -->
<div class="yui-u">
Middle Column
</div> <!-- yui-u -->
</div> <!-- yui-gd -->
</div> <!-- yui-b -->
</div> <!-- yui-main -->
<div class="yui-b">
Right Column
</div> <!-- yui-b -->
</div> <!-- body -->
</div> <!-- doc4 -->
</body>
I've used yui's grid for fixed formats, but for resizable liquid layouts I prefer this solution. It sounds like you want to use percentages rather than a set number of pixels. Is there a reason you're using yui grid for this?
Using general CSS/(X)HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
#wrapper {width: 100%; position: relative; }
#header {width: 100%;text-align: center; }
#left-col {width: 24%; display: inline-block;}
#main-col {width: 48%; margin: 0 1%; display: inline-block;}
#right-col {width: 24%; display: inline-block;}
#footer {width: 100%; clear: both; text-align: center; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>...header-content...</h1>
</div>
<div id="left-col">
...left-col content...
</div>
<div id="main-col">
...main-col content...
</div>
<div id="right-col">
...right-col content...
</div>
<div id="footer">
...footer content...
</div>
</div>
</body>
</html>
<div id="wrapper">
<div id="header">
...content...
</div>
<div id="left-col">
...content...
</div>
<div id="main-col">
...content...
</div>
<div id="right-col">
...content...
</div>
</div>
This works, but it isn't particularly pretty, and you're still left to deal with the column heights and locations yourself.