I created a new ASP .Net MVC 5 project with all the sample views, controllers and such. It has the latest versions of jQuery and Bootstrap.
So I wanted to have a nice template on it so I downloaded this one and I added the images and css files to the content folder, modified the BundleConfig class so that the new css file is included and also changed _ViewStart.cshtml file so that it takes the new layout which I named _myLayout.cshtml.
Technically it worked very well since all the pages now use the new layout template but it is not rendering properly, the menu looks truncated, the header image and the content section are going outside of the border on the right side, and the footer is displayed with a margin at the bottom which should not exist.
I have been able to pinpoint the problem to a "collision" between the template's css and bootstrap since if I remove the bootstrap stylesheet from the BundleConfig file and then styles got rendered as expected.
I am more of a backend/javascript developer so my knowledge about css is very limited and I am way over my head with this one. So much that I don't even know which code to include and both css files are too large to include them in the question.
If anyone is able to help I would really appreciate it and/or if someone can provide some clues as to which css sections would be useful to include in the post to help pinpoint the problem please let me know.
Thanks in advance.
UPDATE:
To replicate the problem you would have to:
- Download the template I mentioned above
- Create a new ASP .Net MVC 5 project
- Add the images and styles.css file from the template on the project's content folder
- On the project's Shared folder create a new layout page called _myLayout.cshtml
- Do the following changes on these files:
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace SC.Web
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/styles.css"));
}
}
}
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_myLayout.cshtml";
}
_myLayout.cshtml
<!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">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - My ASP.NET Application</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main">
<!-- start header -->
<div id="header">
<div id="logo">
<h1>metamorph_highway</h1>
<h2>Design by Metamorphosis Design</h2>
</div>
<div id="menu">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
<!-- end header -->
</div>
<hr />
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
#RenderBody()
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
<p>Copyright © 2008. Privacy Policy | Terms of Use | <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> | <abbr title="Cascading Style Sheets">CSS</abbr></p>
<p>
Design by Free Site Templates, coded by Free Flash Templates
</p>
</div>
</div>
<!-- end footer -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Turns out that on bootstrap there is this definition:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since the template I downloaded gets messed up with this I added the following on its own css file:
*{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
I have no idea if later this will cause bootstrap not to behave as it should and if that happens I'll have to deal with that then.
Related
I've developed a simple web page with angularjs and spring framework.
I tried to make the web page using angular route so that web page work as SPA.
Here's my simple main jsp file. The page is shown when I access to 'http://localhost:8080/test' on the chrome.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page session="false" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script>
angular.module("app", ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "controller"
})
})
.controller("controller", function() {
});
</script>
</head>
<body ng-app="app" ng-controller="controller as main">
<ul>
<li>HOME</li>
</ul>
<ng-view></ng-view>
<div ng-view></div>
</body>
</html>
I want to put the home.html into <ng-view> or <div class="ng-view"> when I click the 'HOME' link without page refresh but it's not working.
What's the problem with the code?
To get it to work change href="#/home" to href="#!home"
Also, make sure home.html is in the /src/main/resources/static/ directory
I would prefer to use .html with Thymeleaf instead of .jsp
Read
Integrating JSP with AngularJS, Is it a concern in real world...Beginer in Angular JS
https://spring.io/blog/2015/08/19/migrating-a-spring-web-mvc-application-from-jsp-to-angularjs
Does anyone know if it's possible to hide a layout:fragment if it is not specified in the calling page?
For example, I have a page layout.html that has something like (where there is a separate fragment.html file with header and footer fragments):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:lang = "en">
<head>
<title layout:title-pattern="$CONTENT_TITLE">TITLE</title>
</head>
<body>
<header layout:replace="fragment :: header">HEADER</header>
<section layout:fragment="messages">MESSAGES</section>
<section layout:fragment="content">CONTENT</section>
<footer layout:replace="fragment :: footer">FOOTER</footer>
</body>
</html>
If in a calling page to the layout that I don't want to include the "messages" fragment, is there a way to do it by just not including that code? For example (say, simple.html):
<html layout:decorator="layout">
<head>
<title th:text=#{PAGETITLE_SIMPLE}>SIMPLE PAGE TITLE</title>
</head>
<body>
<section layout:fragment="content">
<p>Put in some random content for the body of the simple page</p>
</section>
</body>
This will still put into the rendered HTML the text "MESSAGES" inside a <section>-tag.
I have been able to put into this simple.html
<section layout:fragment="messages" th:remove="all"></section>
But this seems somewhat sloppy and was wondering if there was a way to hide that from the users of the layout by putting the logic in the layout to ignore that fragment altogether.
Using Spring 4.1.6, Thymleaf 2.1.4, and Layout Dialect 1.3.3.
Thanks
I was able to resolve this by applying the methods posted by Serge Ballesta in How to check Thymeleaf fragment is defined to the layout dialect.
This is what the rewritten layout.html looks like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
th:lang = "en">
<head>
<title layout:title-pattern="$CONTENT_TITLE">TITLE</title>
</head>
<body>
<header layout:replace="fragment :: header">HEADER</header>
<section layout:replace="this :: messages">MESSAGES</section>
<section layout:fragment="content">CONTENT</section>
<footer layout:replace="fragment :: footer">FOOTER</footer>
</body>
</html>
This way, if the calling page (simple.html) only has the <section> for content, no HTML will be rendered for the section for messages. But if the page did have the following, it will be included as intended:
<section layout:fragment="messages">
<p>Message 1</p>
<p>Message 2</p>
</section>
I am trying to load a dicom image using cornerstone library. I get an error - uncaught exception: loadImage: no image loader for imageId.
I have my image file named as image-1.dcm. What am I doing wrong?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
jsminimal/index.html
</h1>
This is an example of the minimal use of cornerstone driven by javascript
<br>
<br>
In this example, javascript is used to image enable a div.
<br>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone-master/dist/cornerstone.js"></script>
<!-- include special code for these examples which provides images -->
<script src="cornerstone-master/example/exampleImageIdLoader.js"></script>
<script>
$(document).ready(function() {
var imageId = 'image-1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</html>
You need to use the cornerstoneWADOImageLoader to loader DICOM P10:
https://github.com/chafey/cornerstoneWADOImageLoader
I've got an ASP.NET project using MVC 4 and Entity Framework with the following structure:
-Controllers
-HomeController.cs
-SystemInformationController.cs
-Views
-Home
-Index.cshtml
-Shared
-MasterLayout.cshtml
-SystemInformation
-Index.cshtml
The MasterLayout.cshtml code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
<link href="~/Content/MasterPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TopContent">
<a>Home</a>
</div>
<div id="LeftContent">
#Html.ActionLink("Home", "Index", "Home", new { #class = "basiclink" })
<br />
#Html.ActionLink("System Information", "Index", "SystemInformation", new { #class = "basiclink" })
<br />
</div>
<div id="MainContent">
#RenderBody()
</div>
The Index.cshtml code for the Home view is as follows:
#{
Layout = "~/Views/Shared/MasterLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Home Page</title>
</head>
<body>
<div>
Welcome to the Sample Site.
</div>
</body>
</html>
The problem I am having is that whenever I click on either link, be it the home link or the system information link, the url simply appends a "?length=X" where X is the length of the third parameter in the ActionLink item. I want to have the content held within the Master Page to be refreshed but no matter what I do the URL seems to be built incorrectly and not refreshing the center content. Anyone have any ideas as to why that is happening?
The problem is you are using a different overload of the ActionLink method than you probably want. The one you are using is taking your third parameter and using it as the route values, not the controller name. Try changing your links to this:
#Html.ActionLink("Home", "Index", "Home", new {}, new { #class = "basiclink" })
Hi am using Tapestry 5 to create a planning web application and to get around a spring security issue I have changed the url pattern in org.apache.tapestry5.TapestryFilter from /* to /planning/*
After altering the corresponding urls and file paths in any Java / .tml files accordingly the web application works as itended, however my css stylesheet is no longer being picked up.
I have a Layout.java in a components file and a corresponding Layout.tml, and then a layout.css file in a layout folder in the webapp file (outside of WEB-INF)
The stylesheet is being called in the Layout.java file by #Import(stylesheet="context:layout/layout.css") - this always worked before!
I have tried moving the css file into a planning subdirectry planning/layout/layout.css but this still doesnt seem to make a difference!
Web.xml
<display-name>Planning Tapestry 5 Application</display-name>
<context-param>
<param-name>tapestry.app-package</param-name>
<param-value>com.quartetfs.planning.tapestry</param-value>
</context-param>
<filter>
<filter-name>app</filter-name>
<filter-class>org.apache.tapestry5.TapestryFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>app</filter-name>
<url-pattern>/planning/*</url-pattern>
</filter-mapping>
Layout.java
import org.apache.tapestry5.*;
import org.apache.tapestry5.annotations.*;
import org.apache.tapestry5.ioc.annotations.*;
import org.apache.tapestry5.BindingConstants;
/**
* Layout component for pages of Planning Application.
*/
#Import(stylesheet="context:layout/layout.css")
public class Layout
{
/** The page title, for the <title> element and the <h1> element. */
#Property
#Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
private String title;
#Property
private String pageName;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private String sidebarTitle;
#Property
#Parameter(defaultPrefix = BindingConstants.LITERAL)
private Block sidebar;
#Inject
private ComponentResources resources;
public String getClassForPageName()
{
return resources.getPageName().equalsIgnoreCase(pageName)
? "current_page_item"
: null;
}
public String[] getPageNames()
{
return new String[] { "planning/Index", };// "About", "Contact" }; TODO
}
}
Layout.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Concrete
Version : 1.0
Released : 20080825
Description: A Web 2.0 design with fluid width suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1>
<t:pagelink page="planning/index">Project and Resource Planning</t:pagelink>
</h1>
</div>
<div id="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="legal">
©2009 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
You should not have to move the layout.css file; if Tapestry can't find it, then it will throw an exception when loading the pages containing the Layout component.
When you have a problem like this, it is very useful to view the source of the rendered page, and see what the requests and reponses are.
I suspect that the URL for the stylsheet is coming out as "/assets/..." ... which is not picked up by Tapestry (due to how your filter mapping is set up), and you'll see a 404 error.
It is necessary to inform Tapestry that you have placed the application in a sub-folder (alas, the Servlet API does not provide introspection into how you have things configured in your web.xml).
http://tapestry.apache.org/configuration.html#Configuration-tapestry.applicationfolder
Once Tapestry knows the application folder, it can build proper URLs.