I have a bootstrap v3 inline form:
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?
The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?
I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute
View the log and make sure your <input> looks like this:
<input maxlength="6" name="someInput" />
Edit:
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.
If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery
You'll need to wrap each input field inside a div with the class of col-sm-2
you can change the number with which ever you like.
You can customise Bootstrap styles by overriding them with your own CSS.
See the Customizing section on the Bootstrap website for information on how it's done:
http://getbootstrap.com/getting-started/#customizing
Related
I have this code for a dropdown list input in a form:
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
...
</datalist>
<input type="submit">
</form>
It shows this:
However it only shows the list after I click on the input element.
I'd like the dropdown list to always be shown. Is it possible to achieve?
datalist element is hidden in rendering
According to HTML spec:
In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
What you describe in the question and screenshot seems to be the expected behavior: i.e. displaying the list of options when input is active. If you need to display the list at all times, perhaps you might want to consider an additional (or an alternative) element to do that.
I am trying to make a password generator with HTML, CSS and JS. It allows user to pick their password length from a dropdown input field. However, somehow the datalist tag I have used for it, is not working. It shows the input field but not with the dropdown button. Any help would be nice.
HTML Code
<form action="" class="my-form">
<label for="browser">Password length: </label>
<input list="passList" name="passList" id="passList">
<datalist id="passList">
<option value="8">
<option value="10">
<option value="12">
<option value="14">
<option value="16">
<option value="18">
</datalist>
</form>
OK, I have figured it out, 2 elements cannot have the same id so that is why it is not working.
The input tag and datalist tag have same id so it causes trouble so in order for that to work, I have changed the id of input tag.
I tried With fieldset but its disabling only input field and remaining dropdown are not disabled . Is there any solution for my question ??
Problem
What I think you're trying to do is to place a condition on a div, and when that condition is true, you want to disable the div and all child elements.
You can mark a div as disabled using ng-disabled like this:
<div ng-disabled="expression">
<input type="text"> <!-- Won't be disabled! -->
<select> <!-- Also won't be disabled! -->
<option value="1">option 1</option>
</select>
</div>
However, that does not propagate to child elements.
See the doco for ng-disabled here: https://docs.angularjs.org/api/ng/directive/ngDisabled
Solution
You will have to add the ng-disabled attribute to each child element in the div you want disabled.
<div>
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Extra
Keeping the ng-disabled attribute on the div is not required to disable the child elements, however it can be used as a useful css selector.
For example, maybe you want to set the opacity for the whole div when it is disabled.
<div class="special-div" ng-disabled="expression">
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Using this css
div.special-div[disabled] {
opacity: 0.5;
}
Try this:
document.getElementById("yourDivID").style.pointerEvents = "none";
For Example :
<div id="myDiv">
<h1>This is my division</h1>
</div>
Then code will be as below :
document.getElementById("myDiv").style.pointerEvents = "none";
I need to make a spinner, however using <input> only.
I can only use
<input type="text" placeholder="Select Date" class="sel1" />
What can I do, using CSS, to create a simple spinner?
DEMO
You can accomplish this by using the <datalist> tag in HTML5.
Use list attribute in input tag whose value equals to datalist ID
<input type="text" placeholder="Select Date" class="sel1" list="productName"/>
<datalist id="productName">
<option value="Pen">Pen</option>
<option value="Pencil">Pencil</option>
<option value="Paper">Paper</option>
</datalist>
If you double click on the input text in the browser a list with the defined option will appear.
UPDATE:
If you want a spinner as a datepicker just change the type attribute of input from text to date :
<input type="date" placeholder="Select Date" class="sel1" list="productName">
DEMO
my soluton is
input {
-webkit-appearance: menulist;
}
I have a php page with 4 text boxes, each need a "drop down" when the text boxes have the focus. Clicking the options would populate the (editable) text box(es) and close the drop down. The text boxes are of course part of html forms. How can I do this inline with javascript or ajax using minimal code?
Unless you are calling a webserver ajax is useless here.
You will need to have or create a div, since it is below your input box, and absolute positioning will be useful to ensure it is appropriately placed relative to the input box.
You should only have one function, so it should be adaptable to the input fields, hence the reason for absolute positioning.
You will want to track the keypress and mouseclick events in this div, and ensure that only one is open at a time, so have an onblur so that if the user clicks anywhere else the div closes.
if you use jquery you can do this extremely easily.
you could tweak this to your liking:
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
if your select options need to be dynamic, ajax is very simple with jquery. if you already know what's going to be in there, have the php populate the hidden select boxes, and the focus event will show them.