title: CSS Style ignored when inserted page in Spring Tiles
body: <p>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. </p>
  
  <p>The problem is when I try to load the index, the css style is ignored or something like that.</p>
  
  <p>This is the original template</p>
  
  <p><img src="https://i.stack.imgur.com/nHBkK.png" alt="Original Template"></p>
  
  <p>And this is how it looks with Spring</p>
  
  <p><img src="https://i.stack.imgur.com/gohsE.png" alt="My awful template"></p>
  
  <p>Notice how the base of the template (header and menu) are identical, only the dynamic page has problems.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>WEB-INF/tiles/tiles-definitions.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt;
  &lt;!DOCTYPE tiles-definitions PUBLIC
         "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
         "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"&gt;
  &lt;tiles-definitions&gt;
  
      &lt;definition name="defaultTemplate" template="/WEB-INF/template/default/template.jsp"&gt;
          &lt;put-attribute name="header" value="/WEB-INF/template/default/header.jsp" /&gt;
          &lt;put-attribute name="menu" value="/WEB-INF/template/default/menu.jsp" /&gt;
          &lt;put-attribute name="body" value="/WEB-INF/views/index.jspx" /&gt;
          &lt;put-attribute name="footer" value="/WEB-INF/template/default/footer.jsp" /&gt;
      &lt;/definition&gt;
  
  &lt;/tiles-definitions&gt;
  </code></pre>
  
  <p><strong>WEB-INF/views/views.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE tiles-definitions PUBLIC
      "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
      "http://tiles.apache.org/dtds/tiles-config_2_1.dtd"&gt;
  
  &lt;tiles-definitions&gt;
  
    &lt;definition name="index" extends="defaultTemplate"&gt;
      &lt;put-attribute name="body" value="/WEB-INF/views/index.jspx" /&gt;
    &lt;/definition&gt;
  
    &lt;definition name="dataAccessFailure" extends="defaultTemplate"&gt;
      &lt;put-attribute name="body" value="/WEB-INF/views/dataAccessFailure.jspx" /&gt;
    &lt;/definition&gt;
  
    &lt;definition name="resourceNotFound" extends="defaultTemplate"&gt;
      &lt;put-attribute name="body" value="/WEB-INF/views/resourceNotFound.jspx" /&gt;
    &lt;/definition&gt;
  
    &lt;definition name="uncaughtException" extends="defaultTemplate"&gt;
      &lt;put-attribute name="body" value="/WEB-INF/views/uncaughtException.jspx" /&gt;
    &lt;/definition&gt;
  
    &lt;definition name="home" extends="defaultTemplate"&gt;
      &lt;put-attribute name="body" value="/WEB-INF/views/home.jspx" /&gt;
    &lt;/definition&gt;  
  &lt;/tiles-definitions&gt;
  </code></pre>
  
  <p><strong>WEB-INF/template/default/template.jsp</strong></p>
  
  <pre><code>&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
  &lt;%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;AdminLTE | Dashboard&lt;/title&gt;
  &lt;meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'&gt;
  &lt;!-- bootstrap 3.0.2 --&gt;
  &lt;link href="/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;!-- font Awesome --&gt;
  &lt;link href="/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;!-- Ionicons --&gt;
  &lt;link href="/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;!-- Theme style --&gt;
  &lt;link href="/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
  &lt;!--[if lt IE 9]&gt;
            &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
            &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body class="skin-blue"&gt;
      &lt;tiles:insertAttribute name="header" /&gt;
      &lt;div class="wrapper row-offcanvas row-offcanvas-left"&gt;
          &lt;tiles:insertAttribute name="menu" /&gt;
          &lt;tiles:insertAttribute name="body" /&gt;
      &lt;/div&gt;
  
      &lt;!-- jQuery 2.0.2 --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;script src="/sirc/resources/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- AdminLTE App --&gt;
      &lt;script src="/sirc/resources/js/AdminLTE/app.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- AdminLTE for demo purposes --&gt;
      &lt;script src="/sirc/resources/js/AdminLTE/demo.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>WEB-INF/spring/webmvc-config.xml</strong></p>
  
  <pre><code>&lt;aside class="right-side"&gt;
      &lt;!-- Content Header (Page header) --&gt;
      &lt;section class="content-header"&gt;
          &lt;h1&gt;
              Dashboard &lt;small&gt;Control panel&lt;/small&gt;
          &lt;/h1&gt;
          &lt;ol class="breadcrumb"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;Dashboard&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/section&gt;
  
      &lt;!-- Main content --&gt;
      &lt;section class="content"&gt;
  
          &lt;!-- Small boxes (Stat box) --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-3 col-xs-6"&gt;
                  &lt;!-- small box --&gt;
                  &lt;div class="small-box bg-aqua"&gt;
                      &lt;div class="inner"&gt;
                          &lt;h3&gt;150&lt;/h3&gt;
                          &lt;p&gt;New Orders&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="icon"&gt;
                          &lt;i class="ion ion-bag"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;a href="#" class="small-box-footer"&gt; More info &lt;i
                          class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
        ...
      &lt;/section&gt;
      &lt;!-- /.content --&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>What I've tried is to put these annotations in the index.jsp</p>
  
  <pre><code>&lt;jsp:directive.page contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8" session="false" autoFlush="true"  /&gt;
  
  &lt;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" /&gt;
  </code></pre>
  
  <p>Also I tried this <a href="https://stackoverflow.com/questions/5006663/spring-3-tiles-can-not-display-image-or-use-css-style">stackoverflow question</a> with no luck</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>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 <code>&lt;textarea&gt; &lt;/textarea&gt;</code> 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:</p>
  
  <p><img src="https://i.stack.imgur.com/rnKBU.png" alt="Update"></p>
  
  <p>But I can't make those icons stay hidden or to obey the css</p>
  
  <p><strong>UPDATE 2 - Probable Solution (Testing phase)</strong></p>
  
  <p>I was testing the order of the html elements and I found a problem with this code</p>
  
  <pre><code>&lt;li&gt;
     &lt;a href="#"&gt;
        &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; 
        Home
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I changed the order of the tags and the code is like this</p>
  
  <pre><code>&lt;li&gt;
     &lt;i class="fa fa-dashboard"&gt; 
        &lt;a href="#"&gt; Home&lt;/a&gt;
     &lt;/i&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Now the <strong>Home</strong> icon is displayed correctly, I guess the solution is to change the icons order and only then the CSS is being taken.</p>