I have a star rating done with rateit but I have a problem during the rendering.
When the page is loaded, the most of times, I have a little gap between the hidden slider and the selected value, but I refresh the page, the problem disappear and the display is ok.
wrong display result
<div class="row">
<input type="range" min="0" max="5" step="0.5" id="feed"
th:field="*{initValue}" onchange="getRateValue(this.value)">
<div class="rateit" id="rate" data-rateit-mode="font" style="font-size:50px"
data-rateit-backingfld="#feedback" data-rateit-resetable="false"></div>
</div>
could you tell me how to solve that
<div class="form-group">
<!-- Password-->
<label class="control-label" for="password">Password</label> <input type="password" id="password" name="password" class="form-control">
</div>
Consider following snippet. It complies with tb3. The problem is whenever I try to type anything into this field in safari - nothing gets written inside. Blinking cursor becomes active on field input during typing but no characters/black dots appear inside the field.
ff, chrome and even ie work ok. Basically on the picture I type but cursor stays at the same place no input at all.
I turned off all my scripts and problem still persists. If I change type to text it starts to work or if I remove form-control it works. But both are required...
Safari version 5.1.7 - version for windows
Thanks,
The solution that I implemented in my case is adding this line of CSS to element
.SafariFix{
-webkit-user-select:auto;
}
here is HTML of button
<input type="text" placeholder="Search by name" class="btn btn-default SafariFix" id="friendsearchinput">
note (this will work for safari 6 but I am not sure for previous version )
I had the problem that I used
padding: 20px 13px;
which caused issues on the input element. The input text and the placeholder weren't visible in Safari, but worked in any other browser.
I fixed it by using
padding: 0 13px;
height: 45px;
which looks the same but works in Safari.
I had the same problem: You could try to change the font-family of the password input field, for example:
style="font-family:Arial"
and then it should work as expected :-)
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
I have a few radio buttons that are displayed like regular buttons, they look like this:
<div class="buttoncontainer" style="position:relative; left: 80px;">
<label><input type="radio" name="toggle" checked="checked" class="_today"> <span class="css3button-left">Today</span></label>
<label><input type="radio" name="toggle" class="_tomorrow"><span class="css3button">Tomorrow</span></label>
<label><input type="radio" name="toggle" class="_weekend"><span class="css3button">This Weekend</span></label>
<label><input type="radio" name="toggle" class="_nextmonth"><span class="css3button-right">Next Month</span></label>
</div>
I change the buttons appearance when selected like this:
.buttoncontainer input:checked + span
{
...
}
This works in every browser I tested - IE, FireFox, Chrome, and even Safari on my computer , but the appearance will never change to :checked on the Ipad or Iphone using Safari . Does any one have any idea why these buttons don't work only on ipad ?
I suppose you mean that the lables are not clickable?
For some reasons the usual behaviour of the label element does not work on the mobile WebKit out of the box.
Adding label { cursor: pointer; } to the CSS fixes the issue.
In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.
This is my (working apart from on Iphone) code:
HTML:
<div class="" style="height: 30px;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell;">
<label for="3171">Text....</label>
</div>
<div style="display: table-cell; text-align: right;">
<input type="checkbox" id="3171" name="3171">
</div>
</div>
</div>
<label for="3171">
<span class="blocklink">Invisible text</span>
</label>
</div>
CSS:
.blocklink {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 0;
width: 100%;
}
So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.
Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)
Thanks in advance,
Arne
Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.
<label for="elementid" onclick="">Label</label>
The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.
<label for="target">
<span>Some text</span>
</label>
The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:
label span {
pointer-events: none;
}
I solved it by placing an empty onclick="" on a parent element:
<form onclick="">
<input type="radio" name="option1" value="1">
<label for="option1">Option 1</label>
<input type="radio" name="option2" value="2">
<label for="option2">Option 2</label>
<input type="radio" name="option3" value="3" checked="checked">
<label for="option3">Option 3</label>
</form>
For some obscure reason, using CSS, if you apply:
label { cursor: pointer; }
Is going to work both on iPhone and iPad.
Another solution — albeit more hacky, but bulletproof — would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.
I ran into a somewhat unique situation. We were already using pointer-events: none on all spans in labels. However, we then needed to add in a <a> as clickable within one of those labels.
<label>
<span>Label text here. With a link text here.</span>
</label>
So, we explicitly set pointer-events: all on those <a>.
label > span { pointer-events: none; }
label > span > a { pointer-events: all; }
This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.
If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.
SetTimeout don't fix this.
Example:
1. in onMouseEnter use setTimeout with function injected new div in DOM
2. any onClick handler don't called.
Solution: avoid change DOM in events handler.
Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.
This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.
I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.
Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?
More info
Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.
I imagine the reason this bug exists is because an ontouchstart handler is being applied to the <label /> by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclick handler, or in this case the native <label /> functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.