I have an issue with adding glyphicon icon to a submit button. Once I try it with "a" tag, the action did not work when I press the button. So how do I do it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="<%=Const.ActionURIs.INSTRUCTOR_COURSE_STUDENT_LIST_DOWNLOAD%>" style="display:inline;">
<input id="button_download" type="submit" class="btn btn-primary"
name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>"
value=" Download Student List ">
<input type="hidden" name="<%=Const.ParamsNames.USER_ID%>" value="${data.account.googleId}">
<input type="hidden" name="<%=Const.ParamsNames.COURSE_ID%>" value="${courseDetails.course.id}">
</form>
</body>
</html>
Use a <button> tag instead of an <input> tag. Change your button like this:
<button type="submit" class="btn btn-primary" id="button_download" name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
The reason it doesn't work is given on Bootstrap website.
Don't mix with other components : Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
Working example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
</form>
Related
I am working on a project in which the navbar contains a search input field and button to perform the search. In mobile view, this inline form will be inside the toggle section (I don't know if this is the correct term for this, but the search form will appear when the burger icon is clicked). When the screen width is smaller than 575px, the search input field height becomes bigger than the button height.
The following 2 screenshots demonstrate what I am getting:
in mobile view
in desktop view
I used bootstrap 5 and font awesome.
This is the code I wrote:
<div class="col-xs-3">
<form class="form-inline my-2 my-lg-0 input-group">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="icon">
<i class="fas fa-search"></i>
</span></button>
</form>
</div>
How can I make the search button and input field have the same height in mobile view?
The problem is caused by the button top and bottom margins. Using classes my-sm-0 my-2 means that there will be top and bottom margins on mobile only.
Change this...
<button class="btn btn-outline-success my-sm-0 my-2" type="submit">...</button>
...to this.
<button class="btn btn-outline-success" type="submit">...</button>
See the snippet below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="col-xs-3">
<form class="form-inline my-2 my-lg-0 input-group">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">
<span class="icon">
<i class="fas fa-search"></i>
</span></button>
</form>
</div>
<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>
</body>
</html>
So the code below didn't work because the class="btn btn-action hide" is not recognized by the system because it is a custom built class by Firestore rather than a default built-in class in CSS. If that is the case, what should I install to make it work because I've already tried installing everything from Firebase and it still does not work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
In the youtube example you've shown, it does not show you the css file. But I think it's using bootstrap from identifying the class name, here is what you can try:
Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS.
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
</head>
Please do note this is CDN, you can also download bootstrap yourself and add the file from your local path.
Update, the youtube video is using custom css that looks like bootstrap but it's not...to use bootstrap classes for button, see below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-primary">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-danger" hidden>
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
These are the classes you can use:
https://getbootstrap.com/docs/4.0/components/buttons/
just use the firebase.auth().onAuthStateChanged will get similar purpose with out using bootstrapcdn but at first have to get document element id like below:
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
console.log(firebaseUser);
btnSignUp.style.display = "none";
} else {
console.log('not logged in');
btnLogout.style.display = "none";
}
})
I would like to have icons instead of text on the submit buttons in the forms of my website based on w3.css.
I can easily add icons to other buttons but not to the submit buttons.
This is how far I could come:
The blue "save" button is the submit one. The green cancel button is a separate button that provides me a way to "cancel" (go back) via an href. I would like the submit button to look like the green save button, but alas I haven't found a way to replace the "save" text with a save icon (with no text).
I'm using google material icons but could use FontAwesome as well. Here's my html code:
<html>
<title>FPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<header class="w3-container w3-blue">
<h1>Test</h1>
</header>
<div class="w3-bar w3-gray">
<i class="material-icons">home</i></button>
</div>
<br>
<form class="w3-container w3-card-8" action="/test" method="post">
<label class="w3-text-blue"><b>Test ID</b></label>
<input value="" name="test1" class="w3-input w3-border">
<br>
<label class="w3-text-blue"><b>Test Description</b></label>
<input value="" name="test2" class="w3-input w3-border">
<br>
<input class="w3-btn w3-blue" type="submit" value="save">
<i class="material-icons">save</i>
<i class="material-icons">cancel</i>
</form>
</div>
</body>
</html>
Any suggestons will be welcome :-)
Replace
<input class="w3-btn w3-blue" type="submit" value="save">
with
<button type="submit" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></button>
You can use button for that, just wrap it in form and add action="#" to go to your page.
<form action="gothere.html">
<button type="submit" class="w3-btn w3-blue">
<i class="fa fa-id-badge" aria-hidden="true"></i>
</button>
</form>
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 am implementing the following code which is present here in my aspx page. But I am not getting the output(i.e., I want to use glyph icons to my button). Can you please help me out.
actual code in site:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
I have implemented that in my aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<form id="form1" runat="server">
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
</form>
</body>
</html>