I created a basic registration page using creator.ionic.io. I have downloaded , deployed in phone and came as expected.
I tried to explore the ionic generated html page and ended up with a question.
I could not find how index.html is rendering the register.html page i.e. where is the link inside div tag to register.html page.
There are 2 config.xml present in project and I am not sure which is considered to build.
One is inside android platform - I:\myprojects\silyap\platforms\android\res\xml\config.xml
Other is at project name folder:
I:\myprojects\silyap\config.xml
Both config.xml has tag content src="index.html"
Can someone clarify it.
Below is the index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
register.html page
<ion-view title="Register">
<ion-content overflow-scroll="true" padding="true" scroll="false" class="has-header has-footer">
<form class="list">
<ion-list>
<label class="item item-input" name="Number">
<span class="input-label">Number</span>
<input type="tel" placeholder="">
</label>
<label class="item item-input" name="Email">
<span class="input-label">Email</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="">
</label>
</ion-list>
<button class="button button-block ">Register</button>
</form>
</ion-content>
</ion-view>
Awesome that you're using Ionic Creator. If you're unfamiliar with actual Ionic code, I recommend checking out http://AppCamp.io for a run through of how Angular + Ionic work together.
Related
I can't get the Quill editor to appear.
I have two ejs files, a layout and an add_new(which includes the layout).
layout.ejs
<!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 rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/skeleton.css">
<link rel="stylesheet" href="/css/styles.css">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<header class="interface-header">
<h3 class="interface-title">
<a href="/admin" id="interface-title">
Διαχείρηση
</a>
</h3>
<nav class="interface-nav">
<ul class="interface-navbar-list">
<li class="navbar-item">
<a href="/admin/post/addNew" target="_blank" class="navbar-link button button-primary">
Δημιουργία
</a>
</li>
<li class="navbar-item">
<a href="/" target="_blank" class="navbar-link button">
Ιστοσελίδα
</a>
</li>
<li class="navbar-item">
<a href="/login/logout" class="navbar-link button-danger">
Αποσύνδεση
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
add_new.ejs
<%- include("interface_layout.ejs") %>
<div class="container">
<form action="/admin/posts" method="POST" enctype="multipart/form-data" class="admin-form">
<label for="title">Τίτλος</label>
<input type="text" name="title" id="title" class="u-full-width">
<label for="content">Περιεχόμενο</label>
<textarea name="content" id="content" rows="20" style="display: none;" class="u-full-width"></textarea>
<div id="toolbar"></div>
<div id="editor"><p>hello world</p></div>
<% const choices = ["Συνεντεύξεις", "Θέατρο-Κριτική", "Εικαστικά", "test-ride"] %>
<label>Ετικέτες</label>
<div class="choices">
<% choices.forEach(choice => { %>
<label for="<%= choice %>" class="choice"><%= choice %></label>
<input type="checkbox" id="<%= choice %>" value="<%= choice %>" name="tags" class="switch">
<% }) %>
</div>
<label for="date">Ημερομηνία αρχικής δημοσίευσης</label>
<input type="date" name="publishingDate" i="date">
<label for="image">Εικόνα</label>
<input type="file" name="image" id="image" accept="iamge/gif, image/png, image/jpeg">
<button class="button-primary button" type="submit">Ανέβασμα</button>
</form>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var options = {
debug: "info",
modules: {
toolbar: "#toolbar"
},
placeholder: "Compose an epic...",
readOnly: true,
theme: "snow"
}
var container = document.getElementById("editor");
var quill = new Quill(container, options);
</script>
I'm trying to first use quill using the cdn. I import the css for the snow theme in my layout.ejs and in the end of add_new.ejs i import quill and then I initialize it with a script tag. I can't get it to appear.
My console gives me this:
Content Security Policy: The page’s settings blocked the loading of a
resource at https://cdn.quilljs.com/1.3.6/quill.js (“script-src”).
I have also tried to "const Quill = require("quill")" in my routes.js and pass the editor as a variable to my view but I get.
var elem = document.createElement('div');
^
ReferenceError: document is not defined
at Object. (/node_modules/quill/dist/quill.js:7661:12)
I tried the quickstart method (on quill's website) on a plain index.html file and a basic express project with one ejs file and quill worked both times. I suspect there is something wrong with the includes/templates?
I get an error when viewing the browser console, what you need to do is put the highlight.min.js file in front of quill.js. Best to download locally
<link href="/css/quill_editor/quill.snow.css" rel="stylesheet">
<script src="/js/quill_editor/highlight.min.js"></script>
<script src="/js/quill_editor/quill.js"></script>
Below I have Displayed how exactly we can send data from quill/ejs to any backend.
<!-- Include stylesheet -->
<link
href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
rel="stylesheet">
<form action="/add-quill" method="post">
<div id="editor">
</div>
<input name="about" type="hidden">
<input type="submit" onclick="myFunction()">
</form>
<!-- Create the editor container -->
<!-- Include the Quill library -->
<script
src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
function myFunction() {
<!-- Here the class ql-editor is defined by quill js, we can access the inner html from here -->
var editor = document.getElementsByClassName('ql-editor')[0].innerHTML
var about = document.querySelector('input[name=about]');
about.value = editor
};
//Configuring quill
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
I have 3 buttons that are using Bootstrap. I can't seem to get the 3 buttons to align horizontally on the same line. The first button, which is the file selector seems to be doing a line break. How do I stop it from breaking to the next line?
Here is my HTML. As well as a link to a w3schools test sample.
<div style="background-color:rgb(214, 153, 226)">
<!-- Image File Selector Button -->
<div>
<label for="fileSelectImages" class="btn btn-primary">Select Photos</label>
<input id="fileSelectImages" type='file' style="visibility: hidden;" accept="image/*" multiple>
</div>
<button class="btn btn-primary">Clear Photos</button>
<button class="btn btn-primary">Upload Photos</button>
</div>
https://www.w3schools.com/code/tryit.asp?filename=GJG3DPURXIXB
That happens because of the file input, it took the spaces and made the other buttons go down. Putting position:absolute; on the input will do the trick.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="background-color:rgb(214, 153, 226)">
<!-- Image File Selector Button -->
<label for="fileSelectImages" class="btn btn-primary mt-2 ml-2">Select Photos</label>
<input id="fileSelectImages" type='file' style="visibility: hidden; position:absolute;" accept="image/*" multiple>
<button class="btn btn-primary">Clear Photos</button>
<button class="btn btn-primary">Upload Photos</button>
</div>
</body>
</html>
I am a new Django developer. I am trying to overwrite django password_reset_confirm.html page with the below HTML file(change_pwd.html).
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static "icon/tab_logo.png"%}">
<!-- Bootstrap -->
<link href="{% static "web/vendors/bootstrap/dist/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{% static "web/src/css/login.css" %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static "web/vendors/jquery/dist/jquery.min.js" %}"></script>
</head>
<body >
<div class="vertical-center">
<div class="container">
<div class="row">
<div class=" col-md-4 col-md-offset-4">
<div id="loginbox" >
<h1 class="text-center title">Change Password</h1>
</br></br>
<form id="passwordform" role="form" method="post" action=".">
{% csrf_token %}
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password1" placeholder="password" autocomplete="off">
</div>
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password2" placeholder="repeat password" autocomplete="off">
</div>
<div style="margin-top:10px" >
<!-- Button -->
<input id="btn-change-pwd" class="btn btn-primary btn_extend " type="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also overwritten the project's Urls.py as below:
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
When I reset password, the page is redirected to admin/templates/registration/password_reset_confirm.html page and then displays below message:
The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
Based on admin/templates/registration/password_reset_confirm.html, this error happens whenever reset_password link is not valid. When I remove {'template_name' : 'change_pwd.html'} from the Url, it works. But I do not know how to fix this error in change_pwd.html.
Django user templates must be inside a registration folder.
Ex: templates/registration/change_pwd.html
Change
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
to
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'registration/change_pwd.html'}, name='password_reset_confirm'),
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
I am trying to create a bootstrap select list in a html file using Dreamweaver CS6 preview. I have the following code that should work, but it doesn't show the select box as it should - when you select an item a tick should appear next to that item. Also the appearance of the box looks different to the example on http://silviomoreto.github.io/bootstrap-select/.
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script>
<script> $('.selectpicker').selectpicker(); </script>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br> <input type="submit">
</form>
</body>
</html>
I don't see any problem with your code. Here's a working fiddle:
http://jsfiddle.net/cuovoqzw/
HTML:
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="POST">
Name: <input type="text" name="name">
<br />
E-mail: <input type="email" name="email">
<br />
<input type="submit">
</form>
JS:
$('.selectpicker').selectpicker();
The most probable reason I see is that you've included multiple instances of Bootstrap CSS files in your code. Just include only the required ones and delete the rest.