I have created a JSP page where I want to use the CSS properties I have written in a custom CSS file in my SpringBoot project. But unfortunately SpringBoot is not reading the custom CSS file. In a similar vein it is also not reading the CSS files of Bootstrap, hence I am having to link to its CDN instead.
I have read solution to similar to my question here but none of the solutions worked for me. Not sure if these solutions work case specific.
Directory Structure
- src
- main
- java
- resources
- static
- css
- style.css
- webapp
- WEB-INF
- views
- addCountry.jsp
addCountry.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Add Country</title>
</head>
<body>
<!-- Navbar Code Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="http://localhost:8080/WorldAtlas/">World Atlas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="http://localhost:8080/WorldAtlas/addCountry">Add Country</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar Code Ends Here -->
<!-- Add Country Form Code Starts Here -->
<div class="container wrapper">
<form action="saveCountryData" method="POST">
<div>
<input type="text" name = "country" class="form-control" placeholder="Country">
<input type="text" name = "capital" class="form-control" placeholder="Capital City">
<input type="text" name = "isocode" class="form-control" placeholder="ISO Code">
<input type="text" name = "area" class="form-control" placeholder="Area">
<select name = "continent" class="form-control">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<input type="text" name = "currency" class="form-control" placeholder="Currency">
<input type="text" name = "extension" class="form-control" placeholder="Extension">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Add Country Form Code Ends Here -->
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous">
</body>
</html>
Use this way <link rel="stylesheet" type="text/css" href="css/style.css" />
Related
i have a probleme with my css in jsp project
the probleme is that the css doesn't apply on page
i've tried to change the path of css files but it doesn't work
i've also to change
by : <%#include file="../assets2/css/bulma.css" %> but it Caused more errors related to jsp compilation ...
on network tap (inspect elements) :
network tabmy project files
the code on my .jsp file :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page import="entities.Dossier" %>
<%# page import="entities.Responsable" %>
<%# page import="entities.Tache" %>
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%#page import="web.TrackingServlet"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tAccueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
<meta name="keywords" content="bootstrap 4, premium, marketing, multipurpose" />
<meta content="Themesdesign" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--Slider-->
<link rel="stylesheet"type="text/css" href="css3/owl.carousel.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.theme.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.transitions.css" />
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css3/magnific-popup.css">
<!-- css -->
<link href="css3/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css3/icons.css" rel="stylesheet" type="text/css" />
<link href="css3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container">
<!-- LOGO -->
<a href="http://localhost:8080/Tracking/Acceuil" class="logo-sticky">
<img src="img/logogo.png" alt="" class="logo-dark" height="32" />
<img src="img/logogo.png" alt="" class="logo-light" height="32" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="remixicon-menu-fill"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
Startseite
</li>
<c:if test="${session == null }">
<li class="nav-item">
Anmelden
</li>
</c:if>
<c:if test="${session != null }">
<li class="nav-item">
Mein Raum
</li>
<li class="nav-item">
Abmelden
</li>
</c:if>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HERO START -->
<section class="hero-4-bg position-relative bg-gradient" id="home">
<div class="container">
<div class="row align-items-center hero-4-content">
<div class="col-lg-5">
<h1 class="text-white hero-4-title font-weight-medium mb-4 line-height-1_4">Verfolgen Sie Ihre Datei</h1>
<p class="text-white-50 mb-5">WEBTRACK bietet den schnellsten und genauesten Verfolgungsdienst auf der Grundlage einer intelligenten Datenanalyse..</p>
<div class="text-center subcribe-form mt-4">
<form action="progression" method="post">
<c:if test="${id_doc != null }">
<input type="text" value="${id_doc }" name="tracking">
</c:if>
<c:if test="${id_doc == null }">
<input type="text" placeholder="Geben Sie die Tracking-Nummer ein..." name="tracking">
</c:if>
<button type="submit" class="btn rounded-pill btn-purple">Verfolgen </button>
</form>
</div>
</div>
<div class="col-lg-6 offset-lg-1">
<div class="hero-4-img mt-5 mt-lg-0">
<img src="images/hero-4-img.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="home-bottom-shape">
<img src="images/home-4-bottom-shape.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!-- HERO END -->
<!-- FOOTER END -->
<!-- javascript -->
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.bundle.min.js"></script>
<script src="js2/scrollspy.min.js"></script>
<script src="js2/jquery.easing.min.js"></script>
<!-- COUNTER -->
<script src="js2/counter.int.js"></script>
<!-- carousel -->
<script src="js2/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js2/jquery.magnific-popup.min.js"></script>
<script src="js2//magnificpopup-int.js"></script>
<!-- Main Js -->
<script src="js2/app.js"></script>
</body>
</html>
I think you want to include a .css file to jsp. try this
<jsp:include page="../css3/index.css"/>
or
<%#include file="/WEB-INF/include/header.jsp"%>
I am trying to customize the look of the login page for my laravel application.
Here is the file content structure that I have:
In the layouts/app.blade.php file I am trying to add a "app.min.1.css" css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
so it's the app.min.css, but when I go and run my application I get a parsing error as follows:
The file is there and I did verify it, by creating an stan alone view to see if all the css file and js file were loaded correctly:
All I am trying to do is to use the existing Auth pages provided by laravel, but give them my own look and feel. Is it possible to add you own css and js files ?
Here is the code for the app.blade:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
here is the code for the auth/login/blade:
#extends('layouts.app')
#section('content')
<div class="login" data-lbg="teal">
<!-- Login -->
<div class="l-block toggled" id="l-login">
<div class="lb-header palette-Teal bg">
<i class="zmdi zmdi-account-circle"></i>
Salve! Per favore effettui il login
</div>
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="lb-body">
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input">
<label class="fg-label">Indirizzo Email</label>
</div>
</div>
<div class="form-group fg-float ">
<div class="fg-line">
<input type="password" class="input-sm form-control fg-input">
<label class="fg-label">Password</label>
</div>
</div>
<button class="btn palette-Teal bg">Entra</button>
<div class="m-t-20">
<a data-block="#l-register" data-bg="blue" class="palette-Teal text d-block m-b-5" href="">Crea un Account</a>
<a data-block="#l-forget-password" data-bg="purple" href="" class="palette-Teal text">Password Dimenticata?</a>
</div>
</div>
</form>
</div>
</div>
#endsection
You have an error here.
Remove the space between = and > for 'csrfToken' = > csrf_token(),
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
You've got an extra space here:
'csrfToken' = > csrf_token(),
Fix so that it is:
'csrfToken' => csrf_token(),
Usually, when you press the <DOWN ARROW> key on an <input>, you can access to the last saved values of the <form> (useful for remembering username, email) :
I have a Bootstrap <input> for which <DOWN ARROW> does not work (it does not show anything), even if there is a history (I know this because when I click in the input, I can see a dropdown menu with past values).
What could be the reason for <DOWN ARROW> not showing the past history of a form input?
Of course, as you have no previously entered input on your browser for this demo page : http://bigpicture.bi/php/test.php , you will not be able to see what happens when <DOWN ARROW>, but still the HTML code could be useful to debug :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="mainnavbar">
<div class="container">
<ul class="nav navbar-nav navbar-right" id="loginsignupmenu">
<li class="dropdown">
Login / Sign up<span class="caret"></span>
<ul class="dropdown-menu" role="menu" style="min-width: 250px; padding:12px 20px;">
<form id="loginmenu" method="post" autocomplete="on">
<input class="form-control logindropdown signup login forgot" name="email" id="email" type="text" placeholder="example#email.com" title="Enter your email or username" autocomplete="on" />
<button class="btn btn-primary btn-logindropdown logindropdown login" id="login" type="submit">Login</button>
</form>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
i have a problem with difference in render html between IE9 and Chrome.
I reviewed all urls of .js and .css and are fine. All files were downloaded from the official website.
This pic is from IE9
This pic is from Chrome
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="public/assets/ico/favicon.png" />
<title>SMG</title>
<!-- Bootstrap core CSS -->
<link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="public/assets/js/html5shiv.js"></script>
<script src="public/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">SMG</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
</div>
<div class="form-group">
<input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
<option data-hidden="true"></option>
<option value="DU">DNI</option>
<option value="LC">LC</option>
<option value="LE">LE</option>
<option value="PA">PA</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<br/>
<div class="alert alert-block alert-danger " style="display: none">
<button type="button" class="close" aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
</div> <!-- /container -->
<script src="public/js/jquery.js"></script>
<script src="public/dist/js/bootstrap.min.js"></script>
<script src="public/js/bootstrap-select.min.js"></script>
</body>
</html>
dont know why. Can anyone lend me a hand? Thank you!
I am writing a PhoneGap application and using Twitter's Bootstrap for responsive design.
The boxes that say campus/account/department are the select boxes. I think it's obvious the problem is how the select boxes are small, and unchangeable when I try things in css like:
select{ height: 30px; /** OR */ lineheight: 30px; }
Screenshot of what the issue is with my select boxes:
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
<li id="titleText"><h4>Blackbriar</h4></li>
</ul>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropDown">Home <i class="icon-white icon-home"></i></li>
<li class="dropDown">Transactions <i class="icon-white icon-credit-card"></i></li>
<li class="dropDown">Settings <i class="icon-white icon-cog"></i></li>
<li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="templates">
<ul id="templateUl" class="nav nav-pills">
<li class="templi">
<a class="pill">
<text class="temp">Walmart</text>
</a>
</li>
</ul>
</div>
<div id="templateEdit" class="span9">
<form id="codingForm" method="post">
<input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
<input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
<select id="campusField" required>
<option value="">Campus</option>
</select>
<select id="accountField" required>
<option value="">Account</option>
</select>
<select id="departmentField" required>
<option>Deptartment</option>
</select>
<input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
<input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
<input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
<br>
<button id="saveBtn" class="btn btn-large btn-primary">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/precodeFunctions.js"></script>
<script type="text/javascript" src="js/precode.js"></script>
</body>
</html>
Update style as follows :
select.custom { min-height: 30px; /** OR */ line-height: 30px; }
change your select tags html as follows :
<select id="accountField" class="custom" required>
<option value="">Account</option>
</select>