I was using links in form-control-feedback
span
to perform javascript functions since 3.1.1. I'm trying to upgrading to 3.3.5, but the behavior for the form-control-feedback
changed.
Please refer to the Working JsFiddle 3.1.1
SNIPPET
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
<label class="control-label sr-only" for="rename"></label>
<input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
<span class="form-control-feedback" style="top: 0px;right: 44px;">
<a class="pointer" onclick="alert('I love u')"><small>cancel</small></a> <a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a>
</span>
</div>
and to the Not Working JsFiddle 3.3.5
SNIPPET
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
<label class="control-label sr-only" for="rename"></label>
<input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
<span class="form-control-feedback" style="top: 0px;right: 44px;">
<a class="pointer" onclick="alert('I love u')"><small>cancel</small></a> <a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a>
</span>
</div>
I checked, there is a z-index:2
added in 3.3.5. I tried to override it by setting to a bigger number, but it doesn't work.
Do you have any thoughts to make it work again? Any workarounds?
That's simple, in 3.3.5 the class .form-control-feedback
has pointer-events:none
which makes that element not clickable.
see a snippet with v3.3.5
.form-group .form-control-feedback {
top: 0;
right: 44px;
pointer-events: initial; /* or - auto // or - unset */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
<label class="control-label sr-only" for="rename"></label>
<input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
<span class="form-control-feedback">
<a class="pointer" onclick="console.log('I love u')"><small>cancel</small></a> <a class="pointer" onmousedown="save=true;" onclick="console.log('i love u too')"><small><i>save</i></small></a>
</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With