Develop Reference

Why isn't my input group displaying properly?

I'm using an input group to set up an input that allows users to type in a number or edit the number by pressing the plus and minus buttons. For some reason, I can't get them to display in my project. I copied the code to a test page and it displayed there. Also, the text input for the number isn't responding to the CSS that I have set for it as well. What is the issue with my input? I have provided the code below.
This shows up in the css for both buttons as well, but i'm not sure if it has to do with the issue:
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu)
<div class="input-group" id="changePrice${index}">
<span class="input-group-btn" id="minus${index}">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-
field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" id="numberInput${index}" value="${index}"
min="0" max="200">
<span class="input-group-btn" id="plus${index}">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-
field="quant[1]">
<span class="glyphicon glyphicon-plus" id="plus${index}"></span>
</button>
</span>
</div>
.center {
margin: 40px auto;
display: none;
}
.center button:focus {
outline: 0 !important;
}
.center {
position: relative;
top: 50px;
margin: -181px 80px;
}
#numberInput{
width: 25px !important;
height: 23px;
border-radius: 8px;
border-color: #000000;
text-align: center;
}

Placing password visibility icon inside password field

I have this following code.
<div class="login-password">
<label for="password" class="form-label"
>Enter your password</label
>
<input
id="loginPassword"
type="password"
class="form-control"
placeholder="Enter your password"
/>
<i
class="bi bi-eye-slash"
id="togglePassword"
style="margin-left: -30px; cursor: pointer"
></i>
</div>
When I do this the password visibility icon is placed as in the image given below.
How do I place the visibility icon within password field.

Using marketwatch.com's login as an example, you would have to make the css property 'position' to "absolute" for the <i> tag. This will allow you to place it inside the input box. Perhaps something like this:
.bi-eye-slash {
width: 25px;
height: 25px;
position: absolute;
z-index: 200;
top: 28px;
right: 10px;
cursor: pointer;
}

I found the answer to my own question. Well, we have to group the input and the icon is the way to do it, and below is the code.
.input-group-addon i {
margin-left: -30px;
cursor: pointer;
z-index: 200;
position: absolute;
font-size: large;
color: #6c757d;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css"
/>
<div class="login-password">
<label for="password" class="form-label"
>Enter your password</label
>
<div class="input-group">
<input
id="loginPassword"
type="password"
class="form-control"
placeholder="Enter your password"
/>
<div class="input-group-addon">
<i class="bi bi-eye-slash" id="togglePassword"></i>
</div>
</div>
</div>

Why don't the textfields and buttons in my div react to clicks?

For school homework, I'm creating a single page with another student. Our teacher gave us an HTML-File to clone some of the components for our own project, so that we don't have to write it from scratch. We want to create our own .js file with some listeners for the components we take from her file.
The below code produces a label called "keywords" with a question mark icon to its right and a text field further right. A click on the question mark icon opens a popup window with some options and the text field allows comma-separated strings as "keywords". Our problem is that on our HTML-Page, all these elements show up with no problem, but the popup window won't show up when we click on the question mark icon and the text field is also not activated when we click on it.
We looked at our teacher's HTML file and played on it a bit. We found out, that when we remove her js file as a script the same thing happens on her HTML file too. So we looked into her js file and checked the 55.000 lines long js file for some reference to these elements and found nothing. So we don't know, why ours doesn't work. The console shows no errors in the output when we open our HTML file. How can we make these elements respond to clicks? where should we look for errors, mistakes?
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div role="presentation" class="tt-dataset tt-dataset-tags"></div>
</div>
</span>
</div>
<input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
</div>
</div>

How to use FontAwesome icon as submit button in HTML form

I'm trying to get this FontAwesome search icon to act as a submit button:
Search form submit IMG
Link to search form (not evergreen):
https://themirrorman.co
I've looked through various other questions, including use of JS and using a button tag, and still couldn't get this to work.
Here is my code:
CSS:
#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}
/* header search desktop */
#media screen and (min-width: 800px) {
#header-search-desktop-div {
position: absolute;
left: 150px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
}
}
HTML:
<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
</span>
</fieldset>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
The idea of using JS to create the submit function in the 'Space before /head' ? :
<script>$('#header-search-desktop-span').click(function() {
alert('Searching for '+$('#header-search-submit').val());
});
</script>
I'm clearly doing something very wrong, please help =D

You'll need to make the submit button have FontAwesome as the font-family, and use  as the value.
<input style="font-family: FontAwesome" value="" type="submit">
You can use additional CSS to change the styling of the button.

put it inside button tag
<button class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>

Bootstrap Form Not Working

I'm not sure where I went wrong but my bootstrap form won't work as is because I can't type anything into the form boxes. If I move the form boxes above the third div from the top the email box works and if I move them above the second div from the top both boxes work. Can anyone explain what's going on and how to fix this?
<div class ="container" style= "height:150px;">
<div id="Logo" class="col-xs-12 col-md-11">
<img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
</div>
</div>
<div class="container" style= "height:500px;" id="intro">
<div id="HomeTopContainer" class="col-xs-12 col-md-8">
<h3>
Something <i>Something</i>
</h3>
<img id="Something" src="https://abc123.jpg"/>
</div>
<div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
<div class="col-xs-6 col-md-4">
<h1 class="hit">
Something
</h1>
<form class="form" name="form" ng-submit="signUp()" novalidate>
<div class="form-group"
ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
<!--<label>Email</label>-->
<input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
</div>
<div class="form-group"
ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
<!--<label>Password</label>-->
<input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
ng-minlength="3"
required/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
Password must be at least 3 characters.
</p>
</div>
</form>
</div>
</div>
<div class= "hit">
<button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
Join
</button>
<a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
Login
</a>
</div>
The SCSS is as follows:
.hit {
position: relative;
padding: 30px 15px;
/*color: #F5F5F5;*/
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
/*background: #4393B9;*/
.center-block{};
}
.center-block {
font-size: 5em;
width: 150px;
height: 150px;
text-align: center;
};
/*id*/
#intro {
background-color: #add8e6;
}
#glyphicon{
text-align: right;
font-size: 5em;
}
#HomeTopContainer {
text-align: center;
}
#signup{
margin-left: auto;
margin-right: auto;
}
#bottomborder{
height: 75px;
background-color: #19469D;
margin-top: -7px;
text-align: center;
font-size: 20px;
}

You basically have elements overlapping each other. Your class .hit is stacked on top of your other containers (you can see it if you allow that aqua background color to show) To get around this add this CSS:
#signup {
position: relative;
z-index: 10;
}

crazymatt, thanks again for your response, though it wasn't right it got me on the right track. I actually added the following code to fix it:
.form-group{
position: relative;
z-index: 10;
}