Why glyphicon-warning-sign form-control-feedback is not vertically centred in the code below - after adding font-size: 20px; to the label?
<div class="container">
<div class="content align-left contact">
<p>Hello World!</p>
<form action="#" method="post" id="contact-form">
<div class="form-group has-error has-feedback">
<label for="inputName">Your Name (required)</label>
<input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status">(warning)</span>
</div>
</form>
</div>
</div>
CSS:
.has-feedback .form-control-feedback {
border: 1px solid black;
}
.content {
padding: 100px;
}
.content p {
font-size: 18px;
letter-spacing: 1px;
line-height: 30px;
padding-bottom: 20px;
}
.content.contact label {
font-weight: 700;
}
.content.contact label {
font-size: 20px; // this is where the error cause - but why!???
}
Result:
The warning text is not red too.
Any ideas?
at jsfiddle but I can't find bootstrap as the load option!
EDIT:
You can see the bug at bootply
Brad's answer is good, but it is partial. When you change size of the label, or you put some more content before input, then it will be destroyed again. Since element .form-control-feedback has absolute position, then you should warp it in the common parent with input, so you will always get the right result. Add this CSS:
.warning {
color:#a94442;
}
.my-group {
position: relative;
}
And update you HTML:
<div class="form-group has-error has-feedback">
<label for="inputName">Your Name (required)</label>
<div class="my-group">
<input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>
<span id="inputWarning2Status">(warning)</span>
</div>
Working demo: http://www.bootply.com/jGxRAFMKkg
1) you can add external resources to jsfiddle on the left side of the screen, use the bootstrap CDN.
2) the font-size for the label is causing the problem. The icon is fixed and doesnt play nice with the label size changing (don't ask me why - log with bootstrap).
3) THE FIX: add the following to css:
.has-feedback label~.form-control-feedback {
top:33px;
}
.warning {
color:#a94442; /*add this class to your warnings span*/
}
DEMO https://jsfiddle.net/10yLhpu3/
Add this to you stylesheet:
.glyphicon-warning-sign{
margin-top:8px;
}
#inputWarning2Status{
color:red;
}
http://www.bootply.com/gy41ldchWf
And it will work fine.
Remove this from the style
.content.contact label {
font-size: 20px;
}
In this line of code add warning in the class
<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>
add any class name then replace the style that you've remove with this
.warning {
font-size: 20px;
}
Related
I'm doing a project where I have to create a website. Currently I am making the Login/Sign up Form, however I don't know how to change between them using a link.
This is my html code for it:
<div class="container">
<form class="form--unhidden" id="Login">
[...some code is meant to be here to input username/password input + continue button]
<p class="form__text" id="ToCreateAccount">
<a class="form__link" href="#ChangeCreateAccount" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="CreateAccount">
[...some code is meant to be here to create username/password input + continue button]
<p class="form__text" id="ToLogin">
<a class="form__link" href="#ChangeLogin" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
This is my JavaScript for the code:
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#Login");
const createAccountForm = document.querySelector("#CreateAccount");
,
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#ToLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
I've tried to solve this by adding an id to the class="form__text" line and then connect it to the javascript, and also add # or/and "link" to inside the brackets (e.g. #ToCreateAccount).
document.querySelector("#ToCreateAccount").addEventListener("click", e => {
I believe that the problem is that the JavaScript doesn't fully know what's meant to chance, but I can't figure out how to make it understand it.
Hope this is understandable.
Thank you so much for your help.
You were close. I'm guessing your original code should have had this part:
document.querySelector("#ToCreateAccount").addEventListener("click", e => {
right after this part:
const createAccountForm = document.querySelector("#CreateAccount");
Please take a look at the following example. I've added some of the missing elements, and some simple CSS.
document.addEventListener("DOMContentLoaded", function() {
var create = document.getElementById("linkCreateAccount");
var haveAcc = document.getElementById("linkLogin");
var formLogin = document.getElementById("Login");
var formCreateAcc = document.getElementById("CreateAccount");
create.addEventListener("click", function(e) {
e.preventDefault();
hide(formLogin);
show(formCreateAcc);
});
haveAcc.addEventListener("click", function(e) {
e.preventDefault();
show(formLogin);
hide(formCreateAcc);
});
});
function hide(elem) {
elem.classList.add("form--hidden");
elem.classList.remove("form--unhidden");
}
function show(elem) {
elem.classList.add("form--unhidden");
elem.classList.remove("form--hidden");
}
.container {
padding: 15px;
background-color: #ccc;
font-family: 'Arial','Calibri',sans-serif;
}
.form--unhidden {
display: block;
}
.form--hidden {
display: none;
}
label, input {
display: block;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 3px;
margin-bottom: 3px;
padding: 4px;
}
a.form__link {
text-decoration: none;
transition: 0.5s;
}
button {
margin-top: 5px;
padding: 4px 8px;
border-radius: 3px;
border: 1px solid transparent;
background-color: rgb(9, 100, 170);
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
outline-style: none;
outline-width: 0px;
overflow-wrap: break-word;
position: relative;
text-align: center;
}
a.form__link:hover {
color: #aa5810;
}
<div class="container">
<form class="form--unhidden" id="Login" action="loginPage" method="POST">
<div class="form-inputs">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-inputs">
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">
</div>
<div class="form-inputs">
<button type="submit">Login</button>
</div>
<p class="form__text" id="ToCreateAccount">
<a class="form__link" href="#CreateAccount" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="CreateAccount" action="registerPage" method="POST">
<div class="form-inputs">
<label for="newUsername">Username:</label>
<input type="text" id="newUsername" name="newUsername">
</div>
<div class="form-inputs">
<label for="newPass">Password:</label>
<input type="text" id="newPass" name="newPass">
</div>
<div class="form-inputs">
<label for="againPass">Retype password:</label>
<input type="text" id="againPass" name="againPass">
</div>
<div class="form-inputs">
<label for="newEmail">Username:</label>
<input type="text" id="newEmail" name="newEmail">
</div>
<div class="form-inputs">
<button type="submit">Register</button>
</div>
<p class="form__text" id="ToLogin">
<a class="form__link" href="#ChangeLogin" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
The hiding / showing is handled similar to what you were trying to do, I just placed it in a function.
I have an input field and I want to be able to show the length of characters being typed in but I want it to be within the input box all the way to the end of the input box. I'm not even sure where to start to do this.
Not really sure where to start.
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
<div>
var app = new Vue ({
el: '#app',
data: {
keyword: 'hello'
}
})
A counter within the input field pulled to the right edge
this can be handled in CSS in many ways
// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
el: '#app1',
data: {
keyword: 'hello'
}
});
.field {
margin: 1em;
}
.input {
padding-right: 30px;
}
.input-count {
margin: -30px;
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- App 2 -->
<div id="app1">
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword" />
<span v-if="keyword.length" class="input-count">{{keyword.length}}</span>
</div>
<div>
You'll have to use CSS to achieve this. Because you cannot get something like this within the input box:
some text in input 18
There has to another div overlapping your input box. See this:
var counter = document.getElementById ('counter'),
input = document.getElementById ('inp');
counter.innerHTML = input.value.length;
input.addEventListener ('keyup', function (e) {
counter.innerHTML = input.value.length;
});
.inline-block {
display: inline-block;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
#counter {
top: 0;
right: 0
}
<div class='container'>
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded relative inline-block">
<input type="text" class='input' id="inp" placeholder="description one" />
<div id='counter' class='absolute'>
</div>
</div>
<div>
</div>
You can add additional styling if needed.
Try this
<div id="app1">
<br>
<div class="holder">
<label>
{{keyword.length}}
</label>
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
CSS
holder {
position: relative;
}
.holder label {
position: absolute;
left: 200px;
top: 26px;
width: 20px;
height: 20px;
}
.holder input {
padding: 2px 2px 2px 25px;
}
Check the below fiddle for the solution
https://jsfiddle.net/zr968xy2/4/
I am trying to do an optimum level feature which, when a value is higher in an optimum range, a arrow-up glyphicon will be displayed and when the value is lower, it changes to arrow-down glyphicon.
<div class="card-body" ng-repeat="item in resTemperature" ng-if="$last">
<p>
Temperature <span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
<span class="glyphicon" style="font-size: 200%; float: right;"></span>
</p>
</div>
Sample result with hardcoded value:
I would approach it the following way.
Add an additional class to your div indicating if your value is higher/lower/optimal.
Then get rid of your glyphicon span, replacing it with a css pseudo-element.
i.e.,
<style>
.card-body .text::after {
font-size: 200%;
float: right;
}
.card-body.optimal .text::after {
content: "O"; /* replacing these with the glyphs you want */
}
.card-body.lower .text::after {
content: "L";
}
.card-body.higher .text::after {
content: "H";
}
</style>
<div class="card-body optimal" ng-repeat="item in resTemperature" ng-if="$last">
<p>Temperature
<span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
</p>
</div>
HTML
<div class="dep-adm-inp" <?php if(!empty($adm_f) || $adm_f != "") echo "style='display:block'"; ?> id="fees-inp">
<label>Admission Fees(<i class="fa fa-inr"></i>)</label>
<div class="input-group">
<span class="input-group-addon remove-inp"><i class="fa fa-close"></i></span>
<input type="text" class="form-control expected" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Amount Expected">
<input type="text" class="form-control paid" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Paid Amount">
</div>
</div>
Javascript
$(".dep-adm-inp").hide();
the div is hidden when page loads but if the php variable is not empty then i want to show the div when.
set the class variable dep-adm-inp as hidden by default in css. If the variable $adm_f is not empty, set style='display:block;'. With this logic you don't need to call the statement $(".dep-adm-inp").hide(); in your javascript. This way the div will be shown only if the variable $adm_f is not empty.
.hide() method sets display:none; on your element.
You can override it by setting display: block!important; (or whatever your display property is) in CSS:
setTimeout(() => {
$('.item').hide();
}, 2000);
.container {
display: flex;
}
.item {
width: 200px;
height: 100px;
background-color: darkgoldenrod;
margin: 10px;
}
/* This makes .item visible even after .hide() */
.item-visible {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item item-visible">Will be visible</div>
<div class="item">Will be hidden</div>
</div>
I am trying to be able to just show my img class on my view .But also use that img to be able to click on it to pop up the file selector.
How am I able to do so I not sure. I thought might be able to do it with java-script but unsure how. Do not want "No File Selected To Show.
<div class="form-group">
<label for="input-image" class="col-lg-2 col-md-12 col-sm-2 col-xs-12"><?php echo $entry_image; ?></label>
<div class="col-lg-2 col-md-2 col-sm-10 col-xs-12">
<img class="thumbnail" src="<?php echo $image; ?>" style="width:100px; height:100px;"/>
</div>
</div>
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="$('#file').click();">
with jQuery
or without it:
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">
File selector is raw behavior of browser,you can only emulate the "Raw File Input" by image background and hide the raw input button by setting "opacity" style.
Refer: the profile setting page in twitter, use chrome debugger to look into elements and styles.
https://twitter.com/settings/profile
this is a sample code taken from the folllowing Source
css:
<style>
.element{
background-color:red;
width:200px;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
width:200px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
html:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload">
<div class="element">Upload</div>
<input id="uploadBtn" type="file" class="upload" />
</div>
js:
<script>
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>