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>
Related
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" />
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.
I have this site and my links to css and javascript is working but the problem is that the css are not applied on the site. also when i visit the link for my css the browser downloads the css and javascript file. I have tried Googles PageSpeed Insights and it said that
Eliminate external render-blocking Javascript and CSS in
above-the-fold content
My stylesheet is not working because of this.
Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php
this is the file structure of my site. I use Smarty Templating and Bootstrap on my site.
My templates are inside the view folder
Sample Code
index.php
<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();
$smarty->assign('title','Skyerp | Home');
$smarty->assign('year',date("Y", time()));
$smarty->display('index.tpl.html');
?>
index.tpl.html
{extends file='layout.tpl.html'}
{block name='nav'}
<ul class="nav">
<li class="active">Home</li>
<li>SkyERP</li>
<li>SkyPayroll</li>
<li>Manuals</li>
<li>Support</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
{/block}
{block name='content'}
<div class="row-fluid"></div>
{/block}
layout.tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title>
<link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
<link href="assets/css/docs.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {
<!--background-image: url('assets/img/skyerp_blue.jpg');-->
background-size: 80%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom;
}
</style>
<link href="assets/css/stickyfooter.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery.js"></script>
{block name="head"}{/block}
</head>
<body data-spy="scroll" data-target=".module-sidebar">
<div id="wrap" style="height: 100%;">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
<div class="nav-collapse collapse" style="margin-top: 14px;">
{block name='nav'}{/block}
<!--<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn btn-primary">Sign in</button>
</form>-->
</div>
</div>
</div>
</div>
<div class="container">
{block name='banner'}{/block}
{block name='content'}{/block}
</div>
<div id="push"></div>
</div>
<footer id="footer" class="footer">
<div class="container">
<p>SkyErp © {$year}. All Rights Reserved.</p>
<p></p>
<p></p>
<ul class="footer-links">
<li>Blog</li>
<li class="muted">·</li>
<li>Issues</li>
<li class="muted">·</li>
<li>Changelog</li>
</ul>
</div>
</footer>
<script src="assets/js/bootstrap.min.js"></script>
{block name='script'}{/block}
</body>
`
What is the cause of the problem?
Is the problem on the server side or how i process my files?
What should i do to fix this?
I found a fix for this. I think the problem was on the server side. . My website runs on Windows Server. Under IIS Setting on custom MIME types , i added .css set mime type to text/css and .js set mime type to text/javascript. Haven't tried on Apache.
I'm very noob in bootstrap. I tried my first bootstrap page and then downloaded a theme from bootswatch.com and replaced the bootstrap.css with the Cerulean theme. When I change the font in the bootstrap.css it stay with the old theme
#import url(//fonts.googleapis.com/css?family=Caesar+Dressing);
but its not reflecting when I refresh my page.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
</style>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a 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>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">GUVI</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're linking to the right font, yeah; that said, here's my take on this:
In most cases you should use a tag to import Google web fonts. I generally avoid using #import where possible because it delays the loading of the file.
All you should need to do to replace the font is to specify the new font-family as 'Caesar Dressing' inside a body {} style block. Assuming you've already done that in your local copy of bootstrap.css, if that still doesn't work try specifying it inside a tag inside your HTML. You should avoid doing that where possible though; it makes it annoying down the road when you have multiple pages to maintain.
One other thing: I noticed you have some inline styles for some of your inputs. You should really avoid using those where possible--it's good form to try and separate presentation and content markup as much as possible.
I am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))