individual filter reset button missing in bootstrap theme
Closed this issue · 14 comments
The filter reset button exists in the default theme:
But in the bootstrap theme it is missing:
How can I fix this? I haven't found it working in any demos or been able to reverse engineer how the default theme works to fix it.
that looks like the built in chrome 'reset' thing it adds for a search type box. nothing to do with tablesorter... do you have an example where you see this? also what browser are you using
Working example
Not working example
Same results in both IE10 and Chrome. Haven't tested any other browsers.
your working example link does not show the 'x' for me in firefox. it does in chrome. its because the html5 form type of 'search' that adds it. its nothing to do with tablesorter.
bootstrap just includes css to make look like a text box so it normalizes it across browsers..
-webkit-appearance: textfield;
Removing -webkit-appearance: textfield; doesn't return the search clear button. I think something from a tablesorter point of view needs to be done as to your average user these look like text adding inputs and not filter inputs.
Browser's implement html5 form elements differently. Just change the input type from search to text or normalize the differences with CSS.
-----Original Message-----
From: "Ben Bodenmiller" notifications@github.com
Sent: 7/29/2013 1:33 AM
To: "Mottie/tablesorter" tablesorter@noreply.github.com
Cc: "thezoggy" thezoggy@gmail.com
Subject: Re: [tablesorter] individual filter reset button missing in bootstrap theme (#356)
Removing -webkit-appearance: textfield; doesn't return the search clear button. I think something from a tablesorter point of view needs to be done as to your average user these look like text adding inputs and not filter inputs.
Reply to this email directly or view it on GitHub:
#356 (comment)
both working and not working examples above do not work for me, I do not have an x in the field, in safari. I'd agree with thezoggy though it's likely an implementation in type = search, and perhaps the bootstrap version uses text instead of search?
When I look at the computed css in both the working has "-webkit-appearance: searchfield;" the not woking has "-webkit-appearance: textfield;" So just change the css?
bootstrap.min.css:30
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
that being said there must be a reason that bootstrap (not tablesorter) sets this to textfield, but you'd likely have to talk to the bootstrap ppl.
Also this WILL be browser specific since it's based on the html5 searchfield rendering which differs from browser to browser
I'm still not convienced bootstrap is causing this and if it is it isn't via a result of:
-webkit-appearance: textfield;
Changing that to -webkit-appearance: searchfield; still results in no X. Also on the non-bootstrap version overriding with -webkit-appearance: textfield; does not remove the X.
guess you didnt look at my other links that explain whats going on. so let me try to summarize it here for you.
When it comes to some of the new HTML5 form elements, different browsers have very different ways of implementing/rendering inputs. This is all you are seeing.. input type=text vs input type=search.
About the CSS, you can reference: http://demosthenes.info/blog/343/Forcing-A-Consistent-Appearance-For-the-HTML5-Search-Input-Across-All-Browsers
If you want a simple test set so you can be convinced this is your browser handling the input different you can reference: http://diveintohtml5.info/examples/input-type-search.html
Now its simple enough to mimic adding a reset image to an input with firefox, there are plenty of tutorials out there. Just realize then you'd have one browser looking one way while another looks another. Why honestly I'd just recommend sticking to the text input and do your own reset hack (if you want them all to look the same). Otherwise just understand that not all browsers handle form elements the same way, especially with regards to html5 form elements. For example go read up on input type 'url' or 'number' to see other implementation differences that plague web developers.
@thezoggy I appreciate your patients. I actually did look at your links and I am only talking about one web browser and how it is behaving differently depending on the tablesorter theme. I understand each browser creates different form elements differently. All I am trying to determine is why in Chrome the Bootstrap tablesorter theme does not have the x while the other does. In the attached screenshot you can see I set the text types to be identical and it still does not fix the issue. Additionally I tried toggling many other Bootstrap set values with no luck.
Hi @bbodenmiller!
I believe Bootstrap disables the "x" within the filters to maintain a consistent look across all browsers (ref)... kind of silly if you ask me.
You're probably going to need to use some jQuery to add this feature. Something like this (demo):
Script
$('input[type=search]')
.wrap('<span>')
.after('<span class="clear">✕</span>')
.parent()
.on('mouseenter mouseleave', function(e){
$(this).toggleClass('focused');
})
.find('span.clear')
.on('click', function(e){
$(this).parent().find('input').val('');
});CSS
/* hide existing cancel button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* hide added cancel button */
span.clear {
display: none;
}
/* Only show cancel button when focused */
.focused span.clear {
position: relative;
left: -18px;
display: inline-block;
font-weight: bold;
cursor: pointer;
}
/* Add a hover color */
.focused span.clear:hover {
color: red;
}I met the same problem. You can try this:
input[type="search"] {
-webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}@tongtongdlut
Your magic works like a charm!
Thank you!