In w3.css there is no option to prepare a form in such a way so that the inputs and labels are appeared on the same line. I am trying but could not fix the problem. Please help to fix the problem.
<div class="w3-row-padding">
<div class="w3-third">
<label class="w3-label">User Name</label>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name">
</div>
</div>
This is the code I actually wanted:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-quarter">
<p> <label class="w3-label" type="text">User Name</label><p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your username"></p>
</div>
<div class="w3-quarter">
<p> <label class="w3-label" type="text">Passwords</label></p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your passwords"></p>
</div>
</div>
</body>
Related
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 would like to know if it is possible to position the label and the input on the same line, please. I don't know how to do this in Bootstrap 5.
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
</div>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
I've encountered an error while running my application. I'm seeing this error on my console when I run the application
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:68
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text"id="userid" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-black" value="Login" onclick="NullValidator()" #*window.location='Url.Action("Dashboard", "Dashboard")*# />
#*<button type="submit" class="btn btn-black">Login</button>*#
<button type="submit" class="btn btn-secondary">Register</button>
<div class="form-group">
<a style="float:left">Forget Password ? </a>
</div>
</form>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I've tried searching for the fn here but I didn't use it in this page and also on other pages of the application. So I can't determine the cause of the error.
I've solved my problem by adding this code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
When I run this project from the terminal like so
cd to AppointmentScheduler
node index.js
I am now receiving the following erorr in the console
Uncaught TypeError: undefined is not a functionangular-route.js:26 (anonymous function)angular-route.js:6 (anonymous function)
This is the index.html
<html>
<head ng-app="appointments">
<title>Appointments</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container">
<h1>Piar Appointments Scheduler</h1>
<div ng-view></div>
</div>
</body>
</html>
This is the login.html
<div class="row-fluid">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" required>Email</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
This is the public/js/app.js
var appointments = angular.module('appointments', ['ngRoute']);
appointments.config(function ($routeProvider) {
$routeProvider
.when('/',
{templateUrl: 'partials/login.html'})
})
This is the public/js/controllers/app.js That has been edited, sorry about the error of repeating the content of the public/js/app.js here
function LoginCtrl ($scope)
{
}
currently watching up and running with angularjs by Joseph LeBlanc from Lynda.com
Your js/app.js and js/controllers/app.js seems to be exactly the same - but I think the problem is that you are trying to use ngRoute without loading it
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
Also, put ng-app to <html> or <body> element, if you have in on <head>, that will be the root element of your application so it won't even touch <body>
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here