Can't reduce the height of the textbox - html

Can't override and reduce the height of a bootstrap textbox.
<div class="form-group row">
<label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return keyval(event)" onkeyup="return valkey(event)" name="num3" required="required"><span id="rspan" class="rspan"><span>⚠</span>Enter a numeric value > 0 and ≤ 90</span></input>
</div>
The above is my input tag and below is the css for class = "ps"
.ps{
min-height: 2%;
}
I can't increase or reduce the height. when it comes to the width, I can increase it but can't reduce it.
How do i solve this?

I have tried your code. In my opinion, you should try with id. It may happen that the CSS of the col-xl-1 class is overwritten on your CSS. Or else what you can try is !important to emphasize your CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<style>
#txtBox1 {
margin: 10px;
min-height: 50px;
}
</style>
</head>
<body>
<form>
<input type="text" class="col-xl-1 ps" id="txtBox1">
<button class="btn btn-primary">Submit</button>
</form>
</body>
</html>

Related

Image cannot be resized

I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!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">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.

Bootstrap Progress bar dots (bullet-point)

I want to make a progress bar using Bootstrap that has some dots on that progress bar as in the image below. How can I do that? Or where exactly should I research?
.progress {
width: 278px;
height: 7px;
left: 597px;
top: 489px;
}
.progress-bar {
background: #007BFF;
border-radius: 100px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-body">
<div class="justify-content-center">
<div class="progress" style="width: 100%">
<div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try using range bars
https://getbootstrap.com/docs/5.1/forms/range/
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<label for="customRange1" class="form-label">Range bars</label>
<input type="range" class="form-range" id="customRange1" />
</body>
</html>

CSS width is not working on HTML select tag

I am learning Bootstrap v5.0. I am trying to resize the select tag with CSS width but it is not working. I also tried Bootstrap .col and it is also not working.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<body>
<div class="alert bg-light">
<div class="container">
<h4 class="alert-heading">Custom file input</h4>
<hr>
<div class="input-group">
<select class="form-select" style="width: 40px;">
<option value="1">C</option>
<option value="2">C++</option>
<option value="3">Java</option>
<option value="4">Python</option>
<option value="5">JavaScript</option>
</select>
<input type="file" class="form-control" multiple>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
How can I resize this select tag?
If it is possible with bootstrap then please suggest me a solution with bootstrap otherwise CSS.
Replace your width with max-width, and your select tag will behave as expected.
Bootstrap actually adds a style rule which makes the width of the select very fluid.
select {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
width cannot override these style rules, which is why you should be using max-width

HTML5 Datetime-Local picker Custom placeholder

I am using a HTML5 datetime-local picker, is there anyway I can place a custom placeholder text?
HTML Code:
<input id="dt" onchange="dateTimeFormat()" class="input" type="datetime-local">
By default it looks like this:
Theres not many resources into styling this, so any help is much appreciated!
TIA
I think might solve your problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Yess You can use this:-
<input id="dt" class="input" onfocus="(this.type='date')" placeholder="hello">
use onfocus="(this.type='date')" and then you can use placeholder as per you wise
Or
You can use this CSS trick to do this:-
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
after attaching this to your input date, then you can use the placeholder with the dates
For example:-
this is an HTML code with the above-mentioned CSS code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
</style>
</head>
<body>
<input type="date" name="date" id="date" placeholder="Hello">
</body>
</html>

Unable to center input elements inside a div

I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>
try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}