CSS Style ignored when inserted page in Spring Tiles -
i'm developing web app using spring mvc 4. generated base of app spring roo. right i'm working in front end spring tiles 2.2.2. downloaded responsive template , split code fit each part of template.
the problem when try load index, css style ignored or that.
this original template
and how looks spring
notice how base of template (header , menu) identical, dynamic page has problems.
here 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 , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view 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 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 put these annotations in 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 tried stackoverflow question no luck
thanks in advance!
update 1
following @tung vo suggestions checked css , js url , found omitting files. don't know why <textarea> </textarea> tag stopping correct rendering fixed adding text text . these adjustments page looks this:
but can't make icons stay hidden or obey css
update 2 - probable solution (testing phase)
i testing order of html elements , found problem code
<li> <a href="#"> <i class="fa fa-dashboard"></i> home </a> </li> i changed order of tags , code this
<li> <i class="fa fa-dashboard"> <a href="#"> home</a> </i> </li> now home icon displayed correctly, guess solution change icons order , css being taken.
i'm not sure it's possible it's fixed when change
<div class="icon"> <i class="ion ion-bag"></i> </div> into
<div> <i class="icon ion ion-bag"></i> </div> i've checked ionic icons (just because many icons displayed @ same time on page) , maybe it's minor markup issue.
found @ ionic icon examples, maybe it's e.g. <i class="icon ion-bag"></i>, give both try.
Comments
Post a Comment