How to change the height and width of glyphicon-comment(Bootstrap) - html

I want to change the height and width of glyphicon-comment and how to display text inside the glyphicon-comment.i am using predefined comment which is present in the bootstrap.when i try to change the height and width by using inline style it is not working.but if i changing the color of comment it is changing.
Here is my code.
<!DOCTYPE html>
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">Learn by doing</div>
<div class="panel-body">Each computer has a built-in instruction set that it knows how to execute by design.
<form id="myForm">
<span class="glyphicon glyphicon-comment" onclick="radiotruehintbox()"></span>
<div class="radio">
<label><input type="radio" id="true" onclick="radiotruehintbox()">True</label>
</div>
<div class="radio">
<label><input type="radio" id="false" onclick="radiofalsehintbox()">False</label>
</div>
<div class="alert alert-success alert-dismissible" id="truebox" style= display:none>
<div class="close" data-dismiss="alert" aria-label="close">×</div>
<strong>✔</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-danger alert-dismissible" id="falsebox" style= display:none>
<div class="close" data-dismiss="alert" aria-label="Close">×</div>
<strong>✘</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<p>computer uses intelligence to execute instructions.</p>
<span class="glyphicon glyphicon-comment" onclick="radiofalsehintbox()"></span></p>
<div class="radio">
<label><input type="radio" id="true_2" onclick="radiohintbox()">True</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">False</label>
</div>
</form>
<button type="button" class="btn btn-primary btn-md" OnClick="ResetClick()" >Reset </button>
</div>
</div>
</div>
<script>
function radiotruehintbox() {
document.getElementById("false").checked = false;
document.getElementById('falsebox').style.display='none';
document.getElementById('truebox').style.display='block';
}
function radiofalsehintbox() {
document.getElementById("true").checked = false;
document.getElementById('truebox').style.display='none';
document.getElementById('falsebox').style.display='block';
}
function ResetClick() {
document.getElementById("myForm").reset();
document.getElementById("truebox").reset();
document.getElementById("falsebox").reset();
}
</script>
</body>
</html>

Use Font size to increase the size of glyphicons like this -
.glyphicon-comment{
font-size: 24px
}
You can`t write inside a glyphicon.

Use font size to increase the size of bootstrap icons,
You can't increase height or width alone.
.glyphicon-comment {
font-size: 20px;
}
Reference link - https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp
Hope this helps,

Related

How to align Bootstrap 4 button that is using the file selector?

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>

File name not showing in file input in bootstrap

I have this html code
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
When I run and try to upload a file by clicking browse and select a file i want to change the label text to the name of the file I uploaded how can I achieve that?
I'm using bootstrap. If you don't use bootstrap and use normal html it works in default way and shows the file name. But I have to use bootstrap here. So, please suggest a solution that goes with bootstrap.
You're going to need to use some JavaScript for this. I'll walk you through the steps: First detect when a file gets uploaded, then get the file name and update the label contents with the filename. Below is a brief example.
let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
If you require any more clarification please don't hesitate to ask.

HTML - Buttons and Input

I'm creating a web-page out of HTML and whenever I hit one of the buttons, it clears all the text in my inputs. When I hit one of the buttons, I only want it to clear the text in its div. How do I do this? This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SmartMail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1><b>Welcome to SmartMail!!</b></h1>
<form>
<div class="recipients">
<input type="text" class="typer">
<br><br>
<button class="ar">Add User</button>
<button class="ur">Remove User</button>
<br><br><br>
<select name="users" class="userlist" size="24">
<option class="listhead"> __________*Recipents*__________
</option>
<option class="listhead">-------------------------------
</option>
</select>
</div>
<div class="content">
<button class="send">Send</button>
<br><br>
<textarea name="content" class="typec" cols="113" rows="12">
</textarea>
</div>
</form>
</div>
</body>
</html>
Any help is useful! Thanks!
Your page is always refreshing when your click on any of the buttons because a button tag inside a form tag is interpreted as a submit button (<button type="submit">). You need to explicitly give the buttons a type of button. You will also need to prevent the default action when enter is pressed in an input with event.preventDefault().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SmartMail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1><b>Welcome to SmartMail!!</b></h1>
<form>
<div class="recipients">
<input type="text" class="typer" id="typer">
<br><br>
<button type="button" class="ar">Add User</button>
<button type="button" class="ur">Remove User</button>
<br><br><br>
<select name="users" class="userlist" size="24">
<option class="listhead"> __________*Recipents*__________
</option>
<option class="listhead">-------------------------------
</option>
</select>
</div>
<div class="content">
<button type="button" class="send">Send</button>
<br><br>
<textarea name="content" class="typec" cols="113" rows="12">
</textarea>
</div>
</form>
</div>
<script>
document.getElementById('typer').addEventListener("keypress", (e)=>{
if(e.keyCode==13){
e.preventDefault();
}
});
</script>
</body>
</html>

Scaling html page for mobile

I want to make my html page scale with the mobile screen it is opened on. This is my code I have. I have added the initial scale 1 line but it doesn't seem to work. I want the images the input box and the radio button to scale with the width and height of the device the page is opened on. I am using html/css and bootstrap to make the page and some JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
body {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}
input, textarea {
max-width:100%
};
img {
max-width: 100%
};
</style>
</head>
<body onload="myFunc();">
<div class="bs-example">
<div class="bs-example">
<form>
<div class="form-group">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen </label>
<br><br>
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</form></div></form>
</div>
</div>
</body>
</html>
In order to get proper page scaling using Bootstrap, you must set up a grid system for the page. Right now, Bootstrap can't tie into anything and therefore not scale it.
Have a look at the documentation: http://getbootstrap.com/css/#grid
Correct your code like the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
/*body{
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}*/
input, textarea {
max-width:100%;
}
img {
max-width: 100%;
}
</style>
</head>
<body onload="myFunc();">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div><!--col-sm-12-->
</div><!-- row -->
<div class="row">
<div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->
<div class="row">
<div class="col-sm-12 bs-example">
<div class="col-sm-12">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="form-group">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</div><!-- col-sm-12 -->
</div><!-- col-sm-12 bs-example -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
Firstly, while using bootstrap always use bootstrap classes. Secondly, dont use transform property in your css and position fixed in your css.
Your markup has several errors.
You can use the bootstrap classes to address this issue, but also can become free and use them as needed.
Repalce your CSS code for that:
.form{
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
img{
margin: 0 auto;
}
.row{
margin-bottom:10px
}
And replace your markup, for that:
<body onload="myFunc();">
<div class="container">
<div class="form">
<div class="row">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div>
</div>
<form class="form">
<div class="row">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<div class="row">
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen
</div>
<div class="row">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</form>
</div>
</body>
See my fiddle HERE!

how to make a picture stretchable when window is enlarging by width

i want to make the "img/rsz_indexpage_image.jpg" picture stretchable according to the div size variation.when enlarging the width of the div picture is not enlages as expected.how to do this by bootstrap. now image size is static when enlarging.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/loginjs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="img/rsz_indexpage_image.jpg" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%
and its on you how you put it with .img-responsive
img-responsive
.img-responsive {
display: block;
width: 100%;
height: auto;
margin: auto;
}
window.onresize = function(event) {
updateImageSize()
};
function updateImageSize() {
$(".img-responsive").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
});
};