I am currently working on a To do list application with Spring and Thymeleaf. I have a layout page below which has the sidebar and header elements I plan to use on every page, so I have marked each section with fragments.
Layouts.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- head element components -->
<head th:fragment="common-components">
<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="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<script
src="https://kit.fontawesome.com/9e3ed6449c.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
th:href="#{/src/main/resources/static/CSS/layouts.css}"
type="text/css"
/>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<!-- header section -->
<div class="header" th:fragment="header">
<div class="left-section">
<span class="material-symbols-outlined">menu</span>
<div>To-do List</div>
</div>
<div class="right-section">
<div class="add-task-container">
<i class="fa-regular fa-plus fa-xl"></i>
<div class="tool-tip">Add Task</div>
</div>
<!-- Implement later -->
<div class="daily-goal-tracker-container">0/5</div>
<!-- Implement later -->
<div class="user-container">User</div>
</div>
</div>
<!-- sidebar section -->
<div class="sidebar" th:fragment="sidebar">
<div class="sidebar-link">
<div>
<i
class="fa-solid fa-inbox fa-lg"
style="color: rgb(22, 127, 162)"
></i>
</div>
<a class="tab">Inbox </a>
</div>
<div class="sidebar-link">
<i
class="fa-regular fa-calendar-check fa-lg"
style="color: rgb(67, 188, 67)"
></i>
<a class="tab">Today</a>
</div>
<div class="sidebar-link">
<i
class="fa-regular fa-calendar-days fa-lg"
style="color: rgb(160, 12, 160)"
></i>
<a class="tab">Upcoming</a>
</div>
<div class="sidebar-link">
<i class="fa-solid fa-filter fa-lg" style="color: rgb(226, 149, 5)"></i>
<a class="tab">Filters and Lables</a>
</div>
</div>
</body>
</html>
However, when I implement my layouts onto another page, none of the CSS styles I have in place load at all:
Today.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="Layouts :: common-components"></head>
<body>
<div th:replace="Layouts :: header"></div>
<div th:replace="Layouts :: sidebar"></div>
<!-- The to-do list -->
<div class="container">
<form action="/save-task" method="post">
<div class="form-group">
<div class="md-form">
<label for="task">Task Name</label>
<input placeholder="Enter your task ..." id="task" type="text" />
</div>
</div>
<div class="form-group">
<div class="form-group">
<div class="md-form">
<label for="task">Due Date</label>
<input placeholder="" id="task" type="text" />
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I've been stuck on this issue for a couple of days so any help would be greatly appreciated! Below is my pom file for reference too, I've commented out the spring security dependencies and I'm not sure if that may be the cause of the issue or not (relatively a beginner still)
I've already tried using the "/" in the th:href tag like
<link
rel="stylesheet"
th:href="#{/src/main/resources/static/CSS/layouts.css}"
href="/src/main/resources/static/CSS/layouts.css"
type="text/css"
/>
instead of simply
th:href="#{src/main/resources/static/CSS/layouts.css}"
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.7.5
com.personal
todolist-app
0.0.1-SNAPSHOT
todolist-app
Demo project for Spring Boot
<java.version>17</java.version>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency> -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- <dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency> -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- <dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency> -->
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
Related
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
Ok, totally stumped here. My boot app is not serving up any static resources. CSS is not being applied, images aren't being loaded. No security yet, so I don't think that's the problem.
Checking the Console output I get
Resource interpreted as Stylesheet but transferred with MIME type text/html
Everything is 200
But if you look at the response... that's not bootstrap
I believe I am using the correct default file structure
Here's the code:
Pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- WEB JARS -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.2.0</version>
</dependency>
<!-- JDBC -->
<dependency>
<groupId>net.sourceforge.jtds</groupId>
<artifactId>jtds</artifactId>
<version>1.3.1</version>
</dependency>
<!-- LOGGING -->
<dependency>
<groupId>net.logstash.logback</groupId>
<artifactId>logstash-logback-encoder</artifactId>
<version>4.7</version>
</dependency>
<!-- SCOPED JARS-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<executable>true</executable>
</configuration>
</plugin>
</plugins>
<finalName>${project.artifactId}</finalName>
</build>
templates/index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:include="fragments/headerinc :: head">
<title>Demo App</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img style="width: 75px;" th:src="#{~/images/logo.png}"/>My APP</a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Journal</li>
<li>Etc</li>
</ul>
</div>
</div>
</nav>
</div>
templates/fragments/headerinc.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:fragment="head">
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<link href="../css/styles.css" th:href="#{/css/styles.css}"
type="text/css" rel="stylesheet" media="all"/>
</head>
<body>
</body>
</html>
Any suggestions would be greatly appreciated!
In case of using Webjars by using maven dependency, Your controller request method should specify that value even if the uri is just a /, like below.
#RequestMapping(value = "/")
public String index() {
return "welcome";
}
But if you are putting all CSS and JS in the resources/static folder, spring will automatically send corresponding response.
File Structure in eclipse
Css files are not loading at run time so that i lost my design which i did. Below is my code for login page but the thing is am getting links for css files which are not loading if i click that link that file will open in the eclipse IDE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Login Page</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" action="login" method="get">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="userName" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<!-- Login -->
<input type="submit" value="login" />
<br>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Registration Yourself
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Student</li>
<li>Parent</li>
<li>Teacher</li>
</ul>
<p>Forgot your password ?</p>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
I think this is because it is unable to find out that location in root directory
For the Welcome page no need to add ../
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
keep like this
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/js/sb-admin-2.js"></script>
I'm developing a web app using Spring MVC 4. I generated the base of the app with Spring Roo. Right now I'm working in the front end with Spring Tiles 2.2.2. I downloaded a responsive template and split the code to fit each part of the template.
The problem is when I try to load the index, the css style is ignored or something like that.
This is the original template
And this is how it looks with Spring
Notice how the base of the template (header and menu) are identical, only the dynamic page has problems.
Here is my code:
WEB-INF/tiles/tiles-definitions.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="defaultTemplate" template="/WEB-INF/template/default/template.jsp">
<put-attribute name="header" value="/WEB-INF/template/default/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/template/default/menu.jsp" />
<put-attribute name="body" value="/WEB-INF/views/index.jspx" />
<put-attribute name="footer" value="/WEB-INF/template/default/footer.jsp" />
</definition>
</tiles-definitions>
WEB-INF/views/views.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="index" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/index.jspx" />
</definition>
<definition name="dataAccessFailure" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/dataAccessFailure.jspx" />
</definition>
<definition name="resourceNotFound" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/resourceNotFound.jspx" />
</definition>
<definition name="uncaughtException" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/uncaughtException.jspx" />
</definition>
<definition name="home" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/home.jspx" />
</definition>
</tiles-definitions>
WEB-INF/template/default/template.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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 class="skin-blue">
<tiles:insertAttribute name="header" />
<div class="wrapper row-offcanvas row-offcanvas-left">
<tiles:insertAttribute name="menu" />
<tiles:insertAttribute name="body" />
</div>
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/sirc/resources/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/sirc/resources/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="/sirc/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
WEB-INF/spring/webmvc-config.xml
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard <small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer"> More info <i
class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
...
</section>
<!-- /.content -->
</aside>
What I've tried is to put these annotations in the index.jsp
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" autoFlush="true" />
<jsp:output omit-xml-declaration="yes" doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
Also I tried this stackoverflow question with no luck
Thanks in advance!
UPDATE 1
Following #Tung Vo suggestions I checked the css and js url and I found that I was omitting some files. Also I don't know why the <textarea> </textarea> tag was stopping the correct rendering so I fixed adding some text like this some text . With these adjustments my page looks now like this:
But I can't make those icons stay hidden or to obey the css
UPDATE 2 - Probable Solution (Testing phase)
I was testing the order of the html elements and I found a problem with this code
<li>
<a href="#">
<i class="fa fa-dashboard"></i>
Home
</a>
</li>
I changed the order of the tags and the code is like this
<li>
<i class="fa fa-dashboard">
Home
</i>
</li>
Now the Home icon is displayed correctly, I guess the solution is to change the icons order and only then the CSS is being taken.
I'm not sure but it's possible that it's fixed when you change
<div class="icon">
<i class="ion ion-bag"></i>
</div>
into
<div>
<i class="icon ion ion-bag"></i>
</div>
I've just checked Ionic Icons (just because too many icons are displayed at the same time on your page) and maybe it's just a minor markup issue.
As found at the ionic icon examples, maybe it's only e.g. <i class="icon ion-bag"></i>, but just give both a try.
try
<!-- bootstrap 3.0.2 -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="${pageContext.servletContext.contextPath}/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />
The problem was solved adding spaces to the icons and wherever is needed. I suppose that Spring was removing the natural spaces from the template icon tags in the render phase. Examples:
<div class="icon">
<i class="ion ion-pie-graph"> </i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"> </i>
</a>
Also note that the space is defined because doesn't work (or least didn't work for me) in Spring Tiles.
Note: I'm using files with JSPX extension, JSP files doesn't have this problem.
I have used bootstrap framework and a template from a book to finally make the master page the way I want.
When I use google chrome, or IE, and I resize the browsers, the page is resized and the menu is converted to a vertical menu.
However, I just tried on the iphone and it shows "like" a big browser, instead of showing the vertical menu.
I wish I could paste the code but the bootstrap code is way too long to copy here.
I will show my website:
https://levalencia-public.sharepoint.com/
And I will paste the html of my masterpage.
<?xml version="1.0" encoding="utf-8"?><!--SPG:
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at https://levalencia-public.sharepoint.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Flevalencia%2Dpublic%2Esharepoint%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Flv%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
<!--ME:</SharePoint:ProjectProperty>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
<!--ME:</SharePoint:DelegateControl>-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--MS:<WebPartPages:SPWebPartManager runat="server">-->
<!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->
<meta charset="utf-8" />
<!--DC:Specter Group - Blog Bootstrap Version-->
<meta name="description" content="" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/isotope.css" />
<link rel="stylesheet" href="css/elements.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<!-- Modernizr enables HTML5 elements & feature detects for optimal performance.
Include html5shiv 3.6. Our version is a custom build.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/modernizr-2.6.2.custom.js">//<![CDATA[//]]>
</script>
<!--Grab Microsofts CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!--place in head in case need to access jquery inline in SP page layout-->
<script src="js/jquery-1.9.1.min.js">//<![CDATA[//]]>
</script>
<script>//<![CDATA[window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">//<![CDATA[<\/script>')//]]>
</script>
<!--used to help make old scripts work with jquery 1.9-->
<script src="js/jquery-migrate-1.1.0.min.js">//<![CDATA[//]]>
</script>
<!--js libraries-->
<script src="js/jquery-ui-1.8.9.custom.min.js">//<![CDATA[//]]>
</script>
<script src="js/hoverIntent.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/superfish.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/supersubs.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.nivo.slider.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.isotope.min.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tweet.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tabs.js">//<![CDATA[//]]>
</script>
<script src="js/poshytip-1.1/jquery.poshytip.min.js">//<![CDATA[//]]>
</script>
<script src="js/bootstrap.js">//<![CDATA[//]]>
</script>
<!--custom scripts-->
<script src="js/jquery-custom.js">//<![CDATA[//]]>
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://levalencia-public.sharepoint.com/_catalogs/masterpage/lv.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A00A9586E0672297E4794AD6E170F2BEB51</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<!-- HEADER -->
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="logo">
<!--logo snippet-->
<div data-name="SiteLogo"><!--CS: Start Site Logo Snippet--><!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta BlockElement="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x8b0737e1232643da88f7b4721567d1e8">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" ID="x596f04b7f65943cb9ad23b9fd9ac5744" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_x596f04b7f65943cb9ad23b9fd9ac5744" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="/SiteAssets/logosharepointazul.PNG" alt="Luis Valencia - Sharepoint Architect" /><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SiteLogoImage>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Site Logo Snippet-->
</div>
</div>
<div class="tagline">
<h2>
<span>Luis
</span>
Valencia </h2>
<h2>
<span>Sharepoint
</span>
Architect </h2>
</div>
</div>
<div class="social cf">
<ul class="cf">
<li>
<a href="https://www.facebook.com/pages/Sharepoint-Architects-Blog/259727274196140" target="_blank">
<img src="img/social/Facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://twitter.com/levalencia" target="_blank">
<img src="img/social/Twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a href="https://plus.google.com/115487123900000828421/posts" target="_blank">
<img src="img/social/Google+.png" alt="Google+" />
</a>
</li>
<li>
<a href="http://www.linkedin.com/profile/view?id=55314636&trk=nav_responsive_tab_profile" target="_blank">
<img src="img/social/LinkedIn.png" alt="Linked In" />
</a>
</li>
<li>
<a href="#">
<img src="img/social/RSS.png" alt="Blog" />
</a>
</li>
</ul>
<a class="social-toggle" title="Follow Us">Toggle
</a>
</div>
</div>
</div>
</header>
<!-- ENDS HEADER -->
<!-- nav -->
<!-- nav -->
<nav id="topnav">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav nav-collapse collapse">
<!--nav snippet-->
<ul class="root">
<li class="current-menu-item">HOME</li>
<li>ABOUT ME</li>
<li>BLOG</li>
<li>ARTICLES</li>
<li>CONTACT</li>
</ul>
<!--end nav snippet-->
</div> <!--end class nav-->
</div> <!--end container-->
</div>
</div>
</div> <!--end span 12-->
</div> <!--end row-->
</div> <!--end fluid container-->
</nav>
<!-- ends nav -->
<!-- MAIN -->
<div role="main" id="main">
<div class="container-fluid">
<!--main content placerholder, use the following html as sample content for content placeholder-->
<div class="row-fluid">
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
<!--end content placerholder-->
</div>
</div>
<!-- ENDS MAIN -->
<footer>
<!-- bottom footer-->
<div class="footer-bottom">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 copyright">
<p><b>Copyright © 2014 Luis Valencia - All Rights Reverved</b>
</p>
</div>
</div>
</div>
</div>
<!--end bottom footer-->
</footer>
</div>
</div>
</body>
</html>
You are missing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Check;
Bootstrap 3 responsive not working on mobile
good luck!
You are missing the viewport meta tag. Add this within your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this does is essentially instructs the device that 'width' should be considered the device's width. The device can then use that to compare against your media-queries and decide how to display the page.