I am using bootstrap-year-calendar and when I click in the text field the popbox with the calendar selection shows up about 100px above the text field instead of directly at the text field?
If the popbox appears below the text field, it shows up directly at the text field, the problem is only when it shows up above the text field...
Here is my html
<div class="form-group">
<label for="datetimepicker">Application deadline:</label>
<input class="form-control" type="text" style="width: 300px;" id="datetimepicker">
</div>
and here is my javascript
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
since this is just following the minimal example I guess that there is some sort of collision with other parts of my code?
Is there an option to modify the position of the popbox?
If anybody has the same problem... changing the html to this solved it for me...
<div class="row">
<div class="col-lg-6">
<label for="datetimepicker">Application deadline: </label>
<input class="form-control" type="text" style="width: 300px;" id="datetimepicker_example">
</div>
</div>
even though I don't know what is wrong with my original html?
Related
I am currently trying to make an entire Bootstrap input-group to be able to clickable so that the checkbox will be clicked when any part of the input-group is clicked, and it should be able to uncheck the checkbox as well when the input-group is clicked. The current code I have working right now is this:
$(document).ready(function(){
$('.input-group,#opt_in').click(function(){
if ($('#opt_in').is(':checked')) {
$('#opt_in').prop('checked', false);
}
else{
$('#opt_in').prop('checked', true);
}
});
});
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="opt_in" id="opt_in" value="true">
<label class="form-check-label">I CONFIRM</label>
</div>
</div>
<p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>
But for some reason that I am unaware of, it's not working. Any reason why? I'm using jQuery here but I can also use vanilla javascript. I'm just not sure where my code is freaking out!
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I cannot understand why bootstrap color picker is not working. My code is the same as from the example I have used:
https:// itsjavi.com/bootstrap-colorpicker/
In the bundle config of my MVC app I have added
"~/Scripts/bootstrap-colorpicker.js",
"~/Scripts/bootstrap-colorpicker.min.js",
"~/css/bootstrap-colorpicker.css",
"~/css/bootstrap-colorpicker.min.css",
The code in the main.aspx
<div class="col-sm-9">
<div class="input-group demo2">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
And the code in the JS file
$(function () {
$('.demo2').colorpicker();
});
See what hapens
My app screenshot
How it should be screenshot
What I'm doing wrong ?
I had the same issue when using bootstrap-colorpicker#2.5.3
I upgraded to bootstrap-colorpicker#3.2.0 and it fixed the issue
Hope it helped...
The call to initialise the colorpicker should be against the input that it is intended to be use on... i.e. I believe your Main.aspx example is incorrect.
<div class="col-sm-9">
<div class="input-group">
<input type="text" value="#00AABB" class="form-control demo2" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
Notice that the class for .demo2 has been moved to the input for which the picker is intended to manipulate the value of the input box as you use it's controls for picking a color.
I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>
I have input fields with value of ON or Off which I would like to replace with CSS generated image. Is this possible? I asked a similar question but about cells in a table. And I can replace the cell values with the CSS generated images. But I've been fiddling around with INPUT Type=text fields and can't figure out a way to do the same replacement with input type fields. I have seen some here that use a pic stored in a url. But it would be great to use the CSS generated image instead of linking to a pic.
The code (html, css, js) is here.
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_95" class="knack-input-label">
<span class="kn-input-label">Cash</span>
</label>
<div class="input">
<input id="field_95" type="text" value="On">
</div>
</div>
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_97" class="knack-input-label">
<span class="kn-input-label">Internet</span>
</label>
<div class="input">
<input id="field_97" type="text" value="On">
</div>
</div>
sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'
$('span:contains("On")').html(sOn);
The last line of code is what works to replace cell values in a table. I don't know how to do the same for input field values.
To replace the input fields, just do exactly that:
$("input[type='text'][value='On']").replaceWith(sOn);
Your FIDDLE updated with above line.