Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
Related
i have added both cnd link for bootstrap in boilerplate but form still get submited instead of showing error idk what is going wrong even after copying demo form from bootstrap that form also stop working for some reasong idk why. can someone please explain why ?
boilerPlate -
<!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.0">
<title>Document</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="/style.css">
</head>
<body >
<%- include('navbar/navbar.ejs') %>
<main class="container">
<%- body -%>
</main>
<%- include('navbar/footer.ejs') %>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
form.ejs
<% layout('BaseTemplate') %>
<h1 class="mb-5 offset-5">New product</h1>
<form action="/product" method="post" class="w-50 offset-3 needs-validation" novalidate>
<label for="name" class="form-lable mb-1">Name</label>
<input type="text" id="name" name="name"class="form-control mb-3" required>
<label for="price" class="form-lable mb-1">Price</label>
<input type="number" id="price" name="price"class="form-control mb-3" required>
<label for="description" class="form-lable mb-1">Description</label>
<input type="text" id="description" name="description"class="form-control mb-3" required>
<label for="image" class="form-lable mb-1">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
i want to know why is bootstrap form validation not working
You have the form attribute novalidate on your <form> tag. When present, it specifies that the form-data should not be validated when submitted.
Not related to your issue, you also have a typo on your <label>s: class="form-lable" which sets a margin-bottom of 0.5rem, probably why you added the margin class mb-1 so I removed it in the fixed form:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<form action="/product" method="post" class="w-50 offset-3 needs-validation">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-control mb-3" required>
<label for="price" class="form-label">Price</label>
<input type="number" id="price" name="price" class="form-control mb-3" required>
<label for="description" class="form-label">Description</label>
<input type="text" id="description" name="description" class="form-control mb-3" required>
<label for="image" class="form-label">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
This is my 1st Bootstrap effort, so please bear with me. If this has already been addressed somewhere else, I haven't found it, and a polite pointer would be appreciated.
I am trying to create a Bootstrap 5 form that will run on a Raspberry Pi with no connection to the Internet. I have downloaded the Bootstrap-5.2.0-dist kit to my system and the CSS controls appear to be generally working as described.
I need to do some client side validation to ensure the form is filled out correctly when the Submit button is pressed, or preferably when another input control on the form is selected. As a starting point, I trying to figure out how to make the email address checking work and I seem to be missing something basic.
What do I have to add so that the email field will be evaluated as a properly formatted email address?
Here is my 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.0" />
<title>Create</title>
<link
href="/home/ko2f/eHaW/bootstrap-5.2.0-dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="/home/ko2f/eHaW/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-3 bg-primary text-white text-center">
<h4>Emergency Message Service</h4>
<h1>Create Message</h1>
</div>
<form>
<div class="form-group mb-3 mt-3">
<label for="text" class="control-label">From:</label>
<input type="text" class="form-control" id="from"
placeholder="Enter your name" name="from" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="email" class="control-label">To:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email address" name="email" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="msg" class="control-label">Message:</label>
<input type="msg" class="form-control" rows="10" id="msg"
placeholder="Enter the message you want to send here..." name="msg" required />
</div>
</form>
<div class="mx-auto" style="width:350px">
<button type="button" class="btn btn-outline-success">Submit</button>
<button type="button" class="btn btn-outline-danger">Cancel</button>
</div>
</body>
</html>
Thank you for considering my question...
Bob Segrest
Thank you stdunbar!
The 2nd pointer you provided to the Mozilla docs and pointing out that I needed to look at HTML rather than Bootstrap itself, was very helpful.
Bob
I have an assignment that requires us to use a shared Layout, tag helpers, etc. The Razor code works fine on every page except for the confirmaccount page
Here is a page it is working fine on:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<fieldset>
<form>
<div>
<label>Username</label>
<input value="ian#home.com" />
<span>* required</span>
</div>
<div>
<label>Password</label>
<input type="password" value="bl-blue-Bansenauer" />
<span>* required</span>
</div>
<div>
<input type="button" value="Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
And here is the problematic page:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Account Confirmation</title>
</head>
<body>
<h1>New Account Created</h1>
<fieldset>
<form>
<div>
<label>FirstName</label>
<span>Brian</span>
</div>
<div>
<label>Last Name</label>
<span>Bansenauer</span>
</div>
<div>
<label>Program</label>
<span>Web App Dev</span>
</div>
<div>
<label>Username</label>
<span>ian#home.com</span>
</div>
<div>
<label>Password</label>
<span>bl-blue-Bansenauer</span>
</div>
<div>
<input type="button" onclick="location.href='/login.html';" value="Go to Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
At the very least, on the latter, the VS is not recognizing it and the text is completely white.
The first file is login.cshtml, the second is confirmaccount.cshtml
I have no idea why the confirmaccount one is not working, the code #model/layout works fine for 5 other pages. Also, most of this code is premade by my instructor and not my original work.
If i comment out the jquery.mobile...js file, this works fine, with it included, everytime i click the checkbox, the onclick event fires twice. Same is true for onchange event. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
function tester() { alert("I get called twice on click"); }
</script>
<input id="abc" name="myCheckbox" onchange="tester()" type="checkbox" value="true" />
<label for="myCheckbox">Click me</label>
</body>
</html>
This is by design, since both events are happening. See example: http://jsfiddle.net/Twisty/T3qmG/
HTML:
<html>
<head>
<title>Checkbox Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Checkbox Test</h2>
</div>
<div data-role="content">
<input type="checkbox" id="checkbox-choice-1" />
<label for="checkbox-choice-1">Click me</label>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function(){
$("#checkbox-choice-1").click(function(){
alert("Click event triggerd.");
});
$("#checkbox-choice-1").change(function(){
alert("Change event triggerd.");
});
});
I would advise separating your script code if possible. You can a function to one or both events.
Your markup is malformed. The <label> tag points to a non-existent id. It points to "myCheckbox" but the id of your input tag is "abc". This change fixes your issue and the markup is correctly enhanced.
<input id="abc" name="myCheckbox" onchange="tester()"
type="checkbox" value="true" />
<label for="abc">Click me</label>
I want to open a dialog in combination with touchOverflowEnabled: true.
The problem is the following:
The dialog is coming up properly but after a couple of milliseconds, the background below the dialog turns from black into white; the page seems to shrink.
Furthermore, the checkboxes on the main page are smaller; they do not fit the complete page from left to right.
If I do not use touchOverflowEnabled: true everything works well.
Any ideas, how to solve this problem??
Here's my complete sample code (the html-tags are missing):
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/icon.png" />
<link rel="apple-touch-startup-image" href="images/tablet_startup.png">
<link rel="stylesheet" href="css/black-tie/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="css/jquery-mobile/jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
touchOverflowEnabled: true,
defaultDialogTransition: 'pop',
orientationChangeEnabled: false
})
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head>
<body>
<!-- Begin objective page -->
<section id="questions_objectives" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Goals</h1>
</header><!-- /header -->
<div data-role="content">
<form id="f_objectives">
<h3>Personal Goals</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="o_1" id="o_1">
<label for="o_1">Goal 1</label>
<input type="checkbox" name="o_2" id="o_2">
<label for="o_2">Goal 2</label>
<input type="checkbox" name="o_3" id="o_3">
<label for="o_3">Goal 3</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer" data-id="pluginFooter" data-position="fixed">
<div align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Abmelden
</div>
</footer><!-- /footer -->
</section><!-- /page -->
<!-- End objective page -->
<!-- Begin logout page -->
<section id="logout_panel" data-role="dialog">
<header data-role="header">
<h1>Logout</h1>
</header><!-- /header -->
<div id="section_logout" name="section_logout" data-role="content">
<h3>Would you like to receive emails?</h3>
<form id="logout_form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="logout_yes" id="logout_yes" checked="checked" onchange="setLogoutCB('YES')">
<label for="logout_yes">Yes</label>
<input type="checkbox" name="logout_no" id="logout_no" onchange="setLogoutCB('NO')">
<label for="logout_no">No</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer">
<div id="btn_logout" align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Logout
</div>
</footer><!-- /footer -->
</section>
<!-- End logout page -->
</body>
i would recommend u not to use touchOverflowEnabled anymore. It has its own issues and it wont even be there in jquery mobile from the version 1.1
its going to be deprecated.
there,
In my opinion all your problems come from the jQuery version that you have been using - 1.7
According to the JQM blog
Reminder: 1.0 supports jQuery core 1.6.4 only
Since 1.7 was just recently released and has some significant changes (and improvements), only 1.6.4 is officially supported at this time. We plan on adding 1.7 support when we release version 1.1.
When I use touchOverflowEnabled with 1.6.4 there seems to be no problems as you explained above.
There is still a small bug with iPad and touchOverflowEnabled - the dialog is only half page height but this is also easy fixed with single line of css
.ui-mobile [data-role="dialog"]{height: 100%;}
I hope all this is useful :)
Best Regards,
Mihail