I have a Thymeleaf template that uses placeholders, where the placeholder attribute specifies a short hint that describes the expected value or format of an input field.
The placeholders work when the input text is empty. But if a field containing previously entered data needs to be edited, the previously entered text disappears and is replaced with placeholder text when the input receives focus.
Is there a way to avoid this ?
the Thymeleaf template
<form class="form-style-9" action="#" th:action="#{/guardian/save}" th:object="${guardian}" method="post">
<ul>
<li>
<input type="text" th:field="*{name}" id="nameInputTextId" name="field1" class="field-style field-split align-left" placeholder="NOMBRE" />
<input type="text" th:field="*{surName}" name="field2" class="field-style field-split align-right" placeholder="APELLIDOS" />
</li>
<li>
<input type="text" th:field="*{description}" name="field1" class="field-style field-split align-left" placeholder="DESCRIPTION" />
<input type="text" th:field="*{mobile}" name="field2" class="field-style field-split align-right" placeholder="TELEFONO" />
</li>
<li>
<input type="text" th:field="*{email}" name="field1" class="field-style field-split align-left" placeholder="EMAIL" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
</form>
and the HTML generated
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tdk" />
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="57x57" href="../../../images_sebloc/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../../images_sebloc/favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../../../images_sebloc/favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../../../images_sebloc/favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../../../images_sebloc/favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../../../images_sebloc/favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../../../images_sebloc/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../../../images_sebloc/favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../../../images_sebloc/favicon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="../../../images_sebloc/favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../../../images_sebloc/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="../../../images_sebloc/favicon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../../images_sebloc/favicon/favicon-16x16.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="_sebloc/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<title>tdk</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700" type="text/css" />
<link rel="stylesheet" href="/fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css_sebloc/styles.css" />
<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-datepicker.css" />
<link type="text/css" href="/css/jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #fefefe; padding-left: 2%; padding-bottom: 100px; color: #101010; }
footer{ font-size:small;position:fixed;right:5px;bottom:5px; }
a:link, a:visited { color: #0000ee; }
pre{ background-color: #eeeeee; margin-left: 1%; margin-right: 2%; padding: 2% 2% 2% 5%; }
p { font-size: 0.9rem; }
ul { font-size: 0.9rem; }
hr { border: 2px solid #eeeeee; margin: 2% 0% 2% -3%; }
h3 { border-bottom: 2px solid #eeeeee; margin: 2rem 0 2rem -1%; padding-left: 1%; padding-bottom: 0.1em; }
h4 { border-bottom: 1px solid #eeeeee; margin-top: 2rem; margin-left: -1%; padding-left: 1%; padding-bottom: 0.1em; }
</style>
<!--[if lte IE 8]>
<link rel="stylesheet" href="css_sebloc/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="/css_sebloc/side-menu.css" />
<!--<![endif]-->
<!-- Responsive -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" />
<!--<![endif]-->
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.floatThead.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.simple-dtpicker.js"></script>
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<!-- Menu -->
<div id="menu" oncontextmenu="return false" ondragstart="return false" onmousedown="return false">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img src="../../../images_sebloc/home.png" width="136" height="43" alt="POWEREDCUB SL" />
</a>
<!-- Notifications Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Notifications</li>
<li class="pure-menu-item">
<ul class="menu_notifications">
<!-- General Notification -->
<li>
<span><i class="fa fa-bell-o fa-fw"></i></span>
<!--
Alert counter of General notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Connection Notification -->
<li>
<span><i class="fa fa-wifi fa-fw"></i></span>
<!--
Alert counter of No Connection notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Power Notification -->
<li>
<span><i class="fa fa-battery-quarter fa-fw"></i></span>
<!--
Alert counter of No Power notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter show_info"><span>1</span></div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<!-- Start Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Start</li>
<li class="menu-principal pure-menu-item ">
<i class="fa fa-mixcloud fa-lg fa-fw"></i> Home
</li>
<li class="menu-principal pure-menu-item">
<a href="/timeLapse/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Horarios Alarma
</a>
</li>
<li class="menu-principal pure-menu-item pure-menu-selected">
<a href="/guardian/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Guardianes
</a>
</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-user fa-lg fa-fw"></i> Account</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-cogs fa-lg fa-fw"></i> SetUp</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-tv fa-lg fa-fw"></i> Ideefe Web
</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-question-circle fa-lg fa-fw"></i> Help
</li>
</ul>
</div>
<div id="dm_version" class="version"><b>Device manager </b><span class="orange">V 0.1.2</span><br />© Ideefe and Wits 2016
</div>
</div>
<div id="main">
<!-- Header Menu -->
<div id="menu_header" class="header">
<ul class="menu_icon">
<li>
<span><i class="fa fa-user fa-lg"></i></span>
<!-- User -->
Sebloc demo<i class="fa fa-angle-down user_name_down"></i>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-14-24 pure-u-med-1">
<!-- Content Left Wrap -->
<div id="devices" class="content_l_wrap">
<div class="windowHead">
<h2>NUEVO GUARDIAN</h2>
<!-- Pagination & Search Module -->
<div class="search_module">
</div>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContent">
<div class="store_content" data-mcs-theme="dark-3">
<style type="text/css">
.form-style-9{
max-width: 750px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #901E3C;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}.form-style-9 ul li .field-style:focus{
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
float:left;
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
</style>
<form class="form-style-9" action="/guardian/save" method="post">
<ul>
<li>
<input type="text" id="nameInputTextId" name="name" class="field-style field-split align-left" placeholder="NOMBRE" value="" />
<input type="text" name="surName" class="field-style field-split align-right" placeholder="APELLIDOS" id="surName" value="" />
</li>
<li>
<input type="text" name="description" class="field-style field-split align-left" placeholder="DESCRIPTION" id="description" value="" />
<input type="text" name="mobile" class="field-style field-split align-right" placeholder="TELEFONO" id="mobile" value="" />
</li>
<li>
<input type="text" name="email" class="field-style field-split align-left" placeholder="EMAIL" id="email" value="" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
<input type="hidden" name="_csrf" value="a5ecc9df-964e-4824-8402-926db7f377f6" /></form>
</div>
</div>
<div class="windowFoot">
</div>
</div>
</div>
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContentMap">
<div>
API GOOGLE MAPS (iframe configuration must be width 100% height 100%)
</div>
</div>
<div class="windowFoot">
<div class="windowFootL"><span>ADDRESS:</span> Rue du Marteau Nº25 BTE65</div>
<div class="windowFootR"><span>WORKER:</span> Name Surname</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById("nameInputTextId").focus();
</script>
<!-- Js zone -->
<script src="../../../js/ui.js"></script>
</body>
</html>
I figure out the problem. Removing this file it solved the problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
I think this issue has nothing to do with the placeholder being set. It may be due to the reason that you specified the value attribute to be "" ie
in the textfields you specified value = "" .this makes the value of the text field empty and when the text field is empty the placeholder is shown.
try removing value = "".
Related
I have been trying to center an image container between a div and a section. However, when I manipulate the box's margins or the figure, the size of the box changes along with the position of the image container. I want the image container to lie between the section and the box.
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: fit-content;">
<nav class="navbar" role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
<div class="navbar-brand">
<div class="navbar-item">
<img src="assets/Logo.png">
</div>
</div>
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Language
</button>
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Profile
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="box" style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 2%;">
<figure class="image is-96x96" style="margin: auto;">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</body>
Try this approach.
Place absolute positioned circle image inside your relative positioned navbar. Now give bottom: 0 to circle to make sure it remains at the bottom of the nav irrespective of what is its dimensions.
Now give translateY(50%) to move the circle 50% below its height while respecting the bottom: 0. This will make sure that the circle remains at its position.
Implementation:
*{box-sizing: border-box;margin:0;padding:0}
nav{
position: relative;
padding-block: 3rem;
background-color: lightgrey;
}
.circle{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
width: 8rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: seagreen;
}
<nav>
<div class='circle'></div>
</nav>
You should give the image an absolute position while giving the main dive relative position and a certain height where your image is located. In addition, you can add the features you want by giving the left, right and bottom properties to center. I created it as you requested below. I hope it works for you.
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: fit-content;">
<nav class="navbar" role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
<div class="navbar-brand">
<div class="navbar-item">
<img src="assets/Logo.png">
</div>
</div>
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Language
</button>
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Profile
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="box" style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 0%; position:relative; height:150px;">
<figure class="image is-96x96" style="margin: auto; position:absolute; left:0; right:0; bottom:-48px">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div style="background-color: #A020F0; color:white">
Hi everyone
</div>
</body>
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Just started coding everything from scratch ad hit a bit of a road block.
Struggling to get the glyphicons aligned to the top of the div on the left hand side and cant figure out where I am going wrong.
HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>B01 Media- Admin Panel</title>
<!-- Bootstrap -->
<link href="../css/animate.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/magnific-popup.css" rel="stylesheet" />
<link href="../css/owl.carousel.css" rel="stylesheet" />
<link href="../css/owl.theme.css" rel="stylesheet" />
<link href="../css/preload.css" rel="stylesheet" />
<link href="../css/responsive.css" rel="stylesheet" />
<link href="../css/YTPlayer.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="admin.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation Area</h1>
<ul>
<li class="link">
<a href="Index.html">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span>Dashboard</span>
</a>
</li>
<li class="link">
<a hef="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span>Articles</span>
<span class="label label-sucess pull-right">20</span>
</a>
<ul class="collapse collapsable" id="collapse-post">
<li>Create New</li>
<li>View Articles</li>
</ul>
</li>
<li class="link">
<a hef="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable" id="collapse-comments">
<li>
<a href="Approved.html">Approved
<span class="label label-success pull-right">10</span>
</a>
</li>
<li>
<a href="Unapproved.html">Unapproved
<span class="label label-warning pull-right">10</span>
</a>
</li>
</ul>
</li>
<li class="link">
<a href="commenters.html">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span>Comments</span>
</a>
</li>
<li class="link">
<a href="tags.html">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
<span>Tags</span>
</a>
</li>
<li class="link">
<a href="Settings.html">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span>Settings</span>
</a>
</li>
</ul>
</div>
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-5">
<input type="text" id="header-search-field" placeholder="Search for anything" />
</div>
<div class="col-md-7">
<ul class="pull-right">
<li class="welcome">Welcome to your administration area</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label label-warning">3</span>
</a>
</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label label-message">3</span>
</a>
</li>
<li>
<a href="#" class="logout">
<span class="glyphicon glyphicon-logout" aria-hidden="true"></span>
logout
</a>
</li>
</ul>
</div>
</header>
</div>
<div class=row>
<footer id="admin-footer" class="clearfix">
<div class="pull -left"> Copyright 2017</div>
<div class="pull-right"> B01 Media- Blog Admin Panel</div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</html>
CSS
html, body {
font-family: "open sans", "helvetica neue",Arial, Helvetica, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 3px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
height: 100%;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header #header-search-field {
padding-top: 17px;
vertical-align: central;
border: none;
width: 300px;
outline: none;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul glyphicon {
color: #676a6c;
}
.label-message {
background-color: #1ab394;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
#nav-header ul .label {
position: absolute;
margin-top: -10px;
margin-left: -5px;
}
#nav-header .fixed-width {
width: 35px;
}
#admin-footer {
position: absolute;
width: 100px;
bottom: 0px;
background-color: #fff;
padding: 10px;
font-size: 12px;
color: #676a6c;
}
Help much appreciated.
Try taking height: 100%; off of #side-menu h1. This will put your glyphicons inside the navigation area box instead of below it
#side-menu h1 {
height: auto;
}
The situation is that I have a bootstrap modal where I have a form to login, if the user is inactive or password was incorrect, jump a mistake, but when you click to log in if you get this error window isn't open for show it, and so the user isn't aware of the passing.
I would like to know how can I do that when I skip the error I open the modal to display it.
nav ul{
list-style:none;
margin:2em 0;
}
nav li{
margin-right:2em;
display:inline-block;
}
.modal-body, .modal-header{
background:#2c3338;
color:#606468;
}
#signin{
width:auto;
height:auto;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>SSSS!</title>
</head>
<body>
<?php
include 'fn.php';
iniciarSesion();
$msg = "";
if(isset($_GET['miss']))
{
if($_GET['miss']=="1")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> No existe este usuario con esta contraseña.. </p>';
}
elseif($_GET['miss']=="2")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> Este usuario esta inactivo. </p>';
}
}
?>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="modal fade" id="modalLogin" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times white"></i></button>
</div>
<div class="modal-body text-center">
<?php echo $msg; ?>
<form action="action.php?action=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p class="text-center">Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p>No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't need to put my "action.php", i know php and I have it right, when I process the form if it has an error is spent by the URL via GET, I need to know how to make the window opens to display the error
THANK YOU VERY MUCH TO ALL :)
I have a login popup.
I'm starting with jquery and I've looked quite manuals, and not just got the way to make my popup becomes responsive. Here I leave the code popup to see if you can lend a hand as I have one week looking, tasting and ... nothing :(
//scriptLogin.js archive
$(document).ready(function() {
$('a.login-window').click(function() {
//cojemos los valores de las variables desde el link
var loginBox = $(this).attr('href');
//creamos el popup
$(loginBox).fadeIn(300);
//establecemos el padding + border (css)
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//añadimos la capa mask al body(para hacer fondo semi negro al abrirse el popup)
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
//cuando clikemos el icono X se cerrara el popup
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
/*LOGIN*/
#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
}
}
#login-box{
width:600px;
height:auto;
}
.login-popup{
display:none;
background:#2c3338;
padding:10px;
border:2px solid #000;
float:left;
font-size:1.2em;
position:fixed;
top:40%;
left:50%;
z-index:99999;
color:#606468;
font-family:'Calibri';
line-height:1.5em;
}
#signin{
width:auto;
height:auto;
margin:3% 0 0 25%;
}
#fondoLogin{
background-color:#2c3338;
color:#606468;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>...</title>
</head>
<body>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
<div id="login-box" class="login-popup">
<img src="fotos/x.png" style="width:30px; height:30px" class="btn_close" title="Cerrar Ventana" />
<form action="action.php?accion=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p>Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p style="margin:2% 0 0 25%">No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</li>
</ul>
</div>
</nav>
</header>
[...more code that isn't important..]
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scriptLogin.js"></script>
</body>
</html>
if you are using bootstrap , Bootstrap also give responsive pop , Look here
http://getbootstrap.com/javascript/
if you want our custom code for responsive pop , Look here , I have write simple code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pop_div{ display:none;}
.overrelay{ display:none;}
.pop_div {
position: relative;
margin: 0 auto;
width: 38%;
padding: 20px;
background: rgba(247, 247, 95, 0.42);
border: 1px solid #ccc;
z-index: 12;
}
.close_pop {
float: right;
background: #f00;
padding: 7px;
border: hidden;
height: 20px;
width: 20px;
line-height: 9px;
border-radius: 10px;
text-align: center;
color: #fff;
}
.overrelay {
position: absolute;
top: 0px;
background: rgba(255, 0, 0, 0.25);
right: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
}
</style>
</head>
<body>
<div class="responsive_pop">Click me for Responsive POP </div>
<!---------/// POP HERE ------->
<div class="pop_div">
<div class="close_pop">X</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="overrelay"></div>
<!--------/// POP HERE --------->
</body>
<script>
$('.responsive_pop').click(function(){
$('.pop_div').show(500);
$('.overrelay').show(500);
});
$('.close_pop').click(function(){
$('.pop_div').hide(500);
$('.overrelay').hide(500);
});
</script>
</html>
#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
left: 0;
}
}
and put it bottom of css file