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><a href="#"><i class="fa fa-dashboard"></i> Home</a></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">
<a href="#"> Home</a>
</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.
