I am pretty new to Grails/ Bootstrap/ HTML and webprogramming in general. I am not an IT-guy but I have to implement a little monitoring website for a research project. I am pretty sure there is a simple solution to my problem - I would really appreciate if someone could help me!
I am using IntelliJ with Grails 3 and I am trying to integrate the SB Admin2 Bootstrap template from Start Bootstrap into my project.
My problem is, that the Website is not displayed as it should. First I tried to follow this tutorial http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/ but it didn't work for me - don't know where I failed. Then I just copied the index.html content into my gsp file. First only the text was shown, then I followed an answer from this post Bootstrap template not getting displayed and added a link to BootstrapCDN - It worked.. but not correctly. Screenshot
Now the head of my layout gsp file looks the following:
<!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>SB Admin 2 -Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.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.4.2/respond.min.js"></script>
<![endif]-->
</head>
Hope someone can help me!
Thank you in advance!
edit1: If I use the IntelliJ preview in the html file it works perfect.
First of all, I saw you use relative paths in your links to the javascripts etc.
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
I would prefere to use absolute ones like
<link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">
I use a few Bootstrap-Layouts in different Grails Applications (in one application even the sb-admin). Let me try to explain my way (btw. seems that it's nearly the same as your first link, but another description might help out a bit) ...:
copy the index.html to views->layout->main.gsp
place the e.g. g:layoutBody in apropriate places in the main.gsp page and remove the elements which are not useful for your app.
<div id="page-wrapper">
<g:layoutBody/>
</div>
<!-- /#page-wrapper -->
copy the javascripts, images etc. to the web-app directory and check the references in the main.gsp layout that they refer to the javascripts etc. via
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
after that, your views could look like this:
<%# page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<g:if test="${session.user.admin}">
<div class="row">
<g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
</div>
</g:if>
<g:render template="/flash_message" bean="${flash}" />
<div class="row">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<hr>
</div>
Grails 3 comes with Asset pipeline plugin to manage static assets, minimize them, etc,...
Check its documentation. In your case you should move your assets to the corresponding asset folder (javascripts, stylesheets, images) into de assets folder.
For example, for including a css placed in assets/stylesheets/bootstrap/bootstrap.min.css you have to include in you gsp the following:
<asset:stylesheet href="bootstrap/bootstrap.min.css"/>
Other example with javascript and assetPath:
<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>
Related
I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.
Friends, I am working on making a website in which there is an Index.html page, I have defined the title of that page to be for example "Some title here" and a favicon, both of them are getting displayed on localhost but not on server.
I am using Asp.net MVC but the page is basic html i.e. not razor view or anything. The code of tag of that page is
<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>Some title here</title>
<link rel="shortcut icon" href="../gfiwebsite/img/favicon.png">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" 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>
Added
I found that when I hit the temp url of the server that I am using, I am able to see the favicon and title but when I map it to my domain which I have purchased from godaddy, the favicon and title just goes away, any idea why?
Any thoughts?
You can use an url helper to generate the link to the favicon. Assuming that you have placed the file inside img/favicon.png:
<link rel="shortcut icon" href="#Url.Content("~/img/favicon.png")">
The ~ indicates the root of your website.
In asp.net, elements aren't the same as in regular .html files.
Do you have the following syntax at the top of your page?
<%# Page Language="C#" Title="Default Title" %>
If you do, you should try to remove the title attribute and see if it works now. If you don't, try doing it ;) (Been a while since I've worked in classic asp myself)
Do you have <head runat="server">? Because <head> doesn't work.
ASP.NET does not use the same flat html as a regular .html file.
If you really want to work without razor and such, this might be an interesting read:
http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/specifying-the-title-meta-tags-and-other-html-headers-in-the-master-page-cs
edit: You said it works on a temporary domain but not on Godaddy? Are you 100% sure that Godaddy doesn't have any strange caching enabled?
I have run into this issue a great many times... Webhosts introducing certain types of caching that nearly always interfere with these things.
Also, open your console, and go to "network". Make sure you leave it open and make sure "disable caching" is checked. Now, refresh the website.
As I continue to add on to my website, for each HTML file i add i need to include
<!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
Its not an awful method, and it works every time. I just know there has to be an easier method.
I know theres the but that doesn't seem like the easiest method.
I know of the js library require.js and that's wonderful but if I dont think i can use that for my CSS files.
What I would like is a method of referencing one file, loading one file, and it then has some sort of structure or code that then imports all other required CSS and JS files.
What made me see that i needed this sort of system was to select all the files for bootstrap without loading each one like I have loaded my CSS and JS above.
Im sure im missing some key terminology so please help me along with new terms or ideas that Im on the cusp of but haven't found the verbiage to be able to describe yet.
For CSS, there are always #import statements. See here on MDN: #import
Define a single CSS file and use #import url("some-other.css") to load all of your CSS files through the singular, "main" CSS file.
For CSS, you could use a CSS preprocessor like LESS or SASS to bundle all your files into a single file through a build step. The same principle applies to JavaScript as well through some sort of bundler whether it is r.js for require.js AMD style application or Browserify for more CommonJS style source files.
There is nothing wrong with referencing a bunch of files in your index, but it is best practice to build your app with something like Gulp before deploying to production. Your gulp process should combine all css and js into respective minified css and js files. There are a lot a performance benefits to doing this. Sorry to be so brief
You haven't said what your back-end language is, but if you are using PHP you can do something like this:
INDEX.PHP
<?php
include 'inc/head.inc.php';
?>
<body>
<div>All your stuff follows here</div>
<?php include 'inc/nav.inc.php'; ?>
inc/head.inc.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MyDomain</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="some stuff I do" />
<meta name="keywords" content="stuff, things, quality" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
</head>
I created web application using CesiumJS.
On computers its working just fine, but on mobile just Reloading (Safari) and Error (Chrome).
I get Mac from my friend I use developer tools and see error on mobile (see picture)
I tried some solutions for this, to disable iFrame sandbox attribute, but wont works again.
The web site is:
This is my web site
Can you give me a solution please?
Thanks
I spent 30 hours working on different version of my Web site.
I tried without bootstrap, with bootstrap, with scripts, allow-scripts, everything.
I found a solution!!!!!!!!!
I put all my and tags in tag in my .html document.
Also I used tags from Hello world.html document.
My header looks like this now:
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Molim te radi</title>
<!-- LBOOT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Cesium.js"></script>
<script src="CesiumBootstrap.js"></script>
<script src="knockout-3.4.0.js"></script>
<link rel="stylesheet" href="Widgets/widgets.css">
<link rel="stylesheet" href="CesiumBootstrap.css" type="text/css">
</head>
Just this tags is all you (I) need!
Here's the website: http://alweso.2ap.pl/koniugator/trarara.html
This is not the first website I'm making using Bootstrap, so I really don't know why it's not working. All files are in place, here's the code:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
<h1>Polish Verb Conjugator</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="owacewac.php" method="post">
Conjugate: <input type="text" name="verb"><br>
<input type="submit" class="btn btn-default">
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your css file is not found, error 404. Change this line and should be ok:
<link href="../css/bootstrap.min.css" rel="stylesheet">
(relate path was wrong)
Just to help anyone searching and searching.
To solve my issue I had to make sure there were no errors in the browsers javascript console. If you have an error there it can make ALL your javascript (bootstrap stuff) not work. So check the console! I had some kind of error in bootstrap-tooltips. Messed EVERYTHING up.
Removed
//= require bootstrap-tooltips
Everything works now.
Google Chrome console says :
Failed to load resource: the server responded with a status of 404 (Not Found)
then your css file is in a directory other than this
<link href="css/bootstrap.min.css" rel="stylesheet">
UPDATE
your css file is here : http://alweso.2ap.pl/css/bootstrap.min.css
then use
<link href="../css/bootstrap.min.css" rel="stylesheet">
The browser cannot find css/bootstrap.min.css. Most probably you haven't uploaded it yet, since the browser finds js/bootstrap.min.js, and navigating to http://alweso.2ap.pl/koniugator/css throws a 404 Page Not Found.
The server response headers indicate that you use nginx, which should properly serve this files if they were there. If you insist that the files are uploaded, you have to check the nginx configuration to make sure no strange rules for css files exist.
In my case, I made a mistake in my .htaccess file by using a different website address. The night before I had worked long hours and mis-uploaded another website's .htaccess file. Checking for errors with Mozilla console helped to find the error.