I am working with HTML5, I am using an numeric control (input type="number"). By default I need the spinner (up & down arrows) to be visible in the control, right now on hover it is visible.
Can I achieve it by CSS? Or is there any other way?
You can achieve this using the pseudo classes -webkit-inner-spin-button and -webkit-outer-spin-button. Be aware that this trick will work only in Webkit based browsers, such as Chrome.
Example:
/* Always */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
Since you want to display when hover event is triggered, the previous example would be:
/* On hover */
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
opacity: 1;
}
Check this snippet to see an working example.
If you want to expand your functionality to other browsers, you will need to create an widget. The fastest way is using the jQuery UI Spinner widget.
Input type number does not show increase/decrease buttons on iPhone
Its built into jQuery UI - http://jqueryui.com/spinner/
Or see an example here: http://codepen.io/gmkhussain/pen/mgoZjK
Hopefully this solution helps you or someone else out there with this problem.
console.log("Thank You Jesus!");
$(document).ready(function() {
/* alert("ready");//Thank You Saviour */
var minusButton = $(".spinnerMinus"); //to aquire all minus buttons
var plusButton = $(".spinnerPlus"); //to aquire all plus buttons
//Handle click
minusButton.click(function() {
trigger_Spinner($(this), "-", {
max: 10,
min: 0
}); //Triggers the Spinner Actuator
}); /*end Handle Minus Button click*/
plusButton.click(function() {
trigger_Spinner($(this), "+", {
max: 10,
min: 0
}); //Triggers the Spinner Actuator
}); /*end Handle Plus Button Click*/
});
//This function will take the clicked button and actuate the spinner based on the provided function/operator
// - this allows you to adjust the limits of specific spinners based on classnames
function trigger_Spinner(clickedButton, plus_minus, limits) {
var valueElement = clickedButton.closest('.customSpinner').find('.spinnerVal'); //gets the closest value element to this button
var controllerbuttons = {
minus: clickedButton.closest('.customSpinner').find('.spinnerMinus'),
plus: clickedButton.closest('.customSpinner').find('.spinnerPlus')
}; //to get the button pair associated only with this set of input controls//THank You Jesus!
//Activate Spinner
updateSpinner(limits, plus_minus, valueElement, controllerbuttons); //to update the Spinner
}
/*
max - maxValue
min - minValue
operator - +/-
elem - the element that will be used to update the count
*/ //Thank You Jesus!
function updateSpinner(limits, operator, elem, buttons) {
var currentVal = parseInt(elem.val()); //get the current val
//Operate on value -----------------
if (operator == "+") {
currentVal += 1; //Increment by one
//Thank You Jesus ----------------
if (currentVal <= limits.max) {
elem.val(currentVal);
}
} else if (operator == "-") {
currentVal -= 1; //Decrement by one
//Thank You Jesus ----------------
if (currentVal >= limits.min) {
elem.val(currentVal);
}
}
//Independent Controllers - Handle Buttons disable toggle ------------------------
buttons.plus.prop('disabled', (currentVal >= limits.max)); //enable/disable button
buttons.minus.prop('disabled', (currentVal <= limits.min)); //enable/disable button
}
.spinnerVal {
text-align: center;
}
.customSpinner {
display: flex;
margin-bottom: 10px;
}
/*Apply individual Styles to one*/
.spinner-roundVal {
margin: auto 2px;
border-radius: 20px !important;
width: auto !important;
}
.spinner-roundbutton {
border-radius: 100px !important;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<!-- God is good. -->
<div class="container">
<h4 style="text-align:center;margin-bottom:50px;margin-top:5%;margin-bottom:5%;">
Simple Bootstrap Spinners
</h4>
<div class="row" style="
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
">
<div class="col-lg-4">
<!--Input Form1-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-primary spinnerbutton spinnerMinus spinner-roundbutton">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal spinner-roundVal" />
<div class="input-group-append">
<button class="btn btn-primary spinnerbutton spinnerPlus spinner-roundbutton">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form2-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-danger spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-danger spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form3-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-warning spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-warning spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
<div class="col-lg-4">
<!--Input Form4-->
<div class="input-group customSpinner <!--Thank You Jesus!-->">
<div class="input-group-prepend">
<button class="btn btn-success spinnerbutton spinnerMinus">
<span class = "fa fa-minus"></span>
</button>
</div>
<input type="text" readonly value="0" class="form-control spinnerVal" />
<div class="input-group-append">
<button class="btn btn-success spinnerbutton spinnerPlus">
<span class = "fa fa-plus"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- God is good. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"></script>
</html>
More easy and beautiful if you has vue.js v-money-spinner :)
DEMO
Related
This is my demo.
When we hover #image-bg, I want #bg-box-hidden will be display: block.
But I'm losing my way to figure out how to solve the problem
<div class="grid pb1rem">
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
(mouseover)="onImgMouseover($event)"
(mouseout)="onImgMouseout($event)"
/>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</div>
</div>
</div>
The main problem of your code are
Wrong event name.
The element doesn't rendered so you can't targeted the element.
Here is simple solution for you, It might be other way to implement as well.
Try this one, put on your .ts file of the component.
onImgMouseover($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'block';
}
onImgMouseout($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'none';
}
and need modify some on HTML something like
<div
class="grid pb1rem"
(mouseenter)="onImgMouseover($event)"
(mouseleave)="onImgMouseout($event)"
>
<div *ngIf="avatar === null" class="image_wrapper">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
/>
</div>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<div class="box-button-up">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
</div>
</div>
I have the code below for a blazor component which displays a textbox that can be edited with the click
of a button.
#if (_editing)
{
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })"
#onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
</div>
}
else
{
<div class="floatingbox position-relative" #ondblclick="ToggleMode">
<span>#AddText</span>
</div>
}
I want to display this span right under the input box for error messages
<span hidden="#IsShow" class="error-color">Error message</span>
I wrote this css and used display block but what happens is everytime there is an error
the span above is enabled and rearranges the input box controls underneath one another. There can be many of these controls
on a page.
.error-color{
color:red;
//display:block;
padding-left:35px;
}
How can I style this such that the span stays directly under the inputbox?
You can achieve this with position:absolute
See this example:
.control{
position: relative;
}
.error{
position: absolute;
left: 0;
bottom: -10px;
font-size: 10px;
line-height: 1;
}
<div class="control">
<input type="text">
<span class="error">ERROR</span>
</div>
Keep in mind that you have to put position:relative to the parent Element.
Your final HTML shoudl look something like this:
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })" #onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
<!-- insert your error span here -->
<span hidden="#IsShow" class="error-color">Error message</span>
</div>
I have a razor page where I am displaying the list of selected items from a dropdown menu in a div tag. How can I get #FormattedText auto wrap if the list of items selected exceeds the size of the div.
I tried to apply word-wrap and white-space styles and neither of them worked. The content extends beyond the and the scroll bars are displayed. How can I wrap the content within the ? Thanks for any suggestions!
<style>
.dropdown {
word-wrap: normal;
white-space: normal;
}
</style>
<div class="form-control col-md-4 dropdown dropdown-toggle">
#FormattedText
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div>
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
List<string> selectedItems = new List<string>();
public string FormattedText
{
get
{
selectedItems.Clear();
selectedItems.AddRange(Items.Where(s => s.IsUpdated).Select( item => { return item.Name; }));
if (selectedItems.Any())
{
return string.Join(",", selectedItems.ToArray());
}
}
set
{
selectedText = value;
}
}
First of all, your Bootstrap .dropdown structure is not correct. If you look at their examples, .dropdown-toggler and .dropdown-menu need to be the same level, wrapped by .dropdown. Also each item in .dropdown-menu needs to have .dropdown-item class as well.
So you need to change the structure to:
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler"
data-toggle="dropdown">
#FormattedText
</button>
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div class="dropdown-item">
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
It will look something like this:
The reason why the formatted text, wrapped in the button, is not wrapping is because .dropdown-toggler has style white-space: nowrap;. You can get rid of that style or use Bootstrap utility class .text-wrap on the .dropdown-toggler
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Lastly the dropdown is out of the .form-control's border. That's because .form-control has a fixed height. You can set its height style to auto, or use Bootstrap utility class .h-auto:
<div class="form-control col-md-4 h-auto">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Now the whole thing looks like this:
demo: https://jsfiddle.net/davidliang2008/3bykc4rf/14/
I am trying to validate an inline form field, with Bootstrap 4.
When validation is triggered, the inline form field jumps in width. Here is a fiddle (just click Enter without entering a value, to see the problem): https://jsfiddle.net/aq9Laaew/213418/
How can I fix this?
This is my HTML:
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
</div>
</form>
And this is my JavaScript:
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'was-validated');
});
Try this :
var form = document.getElementById('form-stage1');
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'form-inline was-validated');
$(".invalid-feedback").show();
if (form.checkValidity() !== false) {
d3.select('#stage1-results').style('display', 'inline-block');
var val = d3.select('#stage1-amount').property("value");
d3.select('#stage1-output').text(formatPounds(val));
var percentile = getPercentile('property', val)
d3.select('#stage1-lower').text(percentile);
d3.select('#stage1-higher').text(100-percentile-1);
}
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.form-control{
width:auto!important;
flex:0!important;
}
.input-group{
width:auto!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
</form>
</div>
https://jsfiddle.net/aq9Laaew/215767/
When I attempt to apply a maximum width to an input field, it positions the secondary button as if the input field didn't have a maximum width.
JSFiddle Example
HTML:
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
</div>
CSS:
.datefield {
max-width: 100px;
}
Result:
How can I get the secondary button to correctly sit next to the text field?
Try using display:inline-block;
https://jsfiddle.net/ex3ntia/DTcHh/22030/
.input-group-btn {display:inline-block;}
Bootstrap is laid out by using a grid system. You will need to adjust your design layout to accomplish what you are looking to achieve.
What is happening now is all you are doing is shrinking down the size of the input box, but not the actual grid cell.
try adjusting just the cell or placing the form-group elements within a cell then within a targeting element you can shrink.
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 10px;
}
.shrink {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="form-group">
<div class="shrink">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div><!-- .input-group -->
</div><!-- .shrink -->
</div><!-- .form-group -->
</div><!-- .row -->
</div> <!-- .container -->
Hope that helps!
The span was not being displayed inline. I assume this was changed with the input-group-btn class. Here is the new code (I named the new class ):
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.datefield {
max-width: 100px;
}
.buttoncleardiv {
display: inline;
}
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn buttoncleardiv">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
The JS Fiddle is here