I have a checkbox created as follows:
<td class="center">#Html.DisplayFor(modelItem => item.IsBusinessHours)</td>
It renders as the following html:
<input disabled="disabled" class="check-box" type="checkbox" CHECKED="checked"/>
My problem is that the check in the box is very hard to read in this disabled state.
I would like to know the best way to style the checkbox to make it appear like the non-disabled checkbox (or otherwise make it more readable). However I still want the checkbox to be read only.
My project uses Asp.Net MVC, jQuery and jQuery-UI.
you can add rules like this to you CSS style sheet :
input[disabled='disabled'] {
color: #ccc;
}
but ie6 doesnt support that, just a heads up.
I ended up resolving this issue by replacing my checkboxes with jQuery UI buttons. The jQuery script that I ended up using is posted here.
Related
As a usability feature I'd like to add highlights to the currently focused form element, in a similar fashion to the moneysupermarket forms. I'm working with an HTML pattern for building forms that I cannot change:
<div class="field">
<label for="name">
Name
</label>
<input id="name" type="text" value="Fred">
</div>
I thought I'd come up with a simple solution: I'll add focus and blur events to all inputs, selects and textareas that toggles a .hasfocus class on the wrapping div, then hook styling on that class.
Here's a demo on JSBin but if you're using Firefox or Chrome 40 you may see the issue I have: Adding the CSS content property to the div.field breaks the form interaction, it seems the initial mouse click is swallowed by the browser & you're unable to select the content. I'm stumped, I think it may be a browser bug. Any ideas how I can make the highlighted elements behave as the others?
Thanks in advance!
Edit:
Here's a screencast that demonstrates the issue: http://screencast.com/t/LlmwcsZ2qYM
I was unable reproduce in Chrome 42, but I did reproduce this in Firefox 37. It appears as though adding the highlighting to the label element fixes the issue:
.field.hasfocus label:before {
content:"";
...
}
Updated JS Bin: http://jsbin.com/kajifoquci/edit?html,css,js,output
You missed your test-x references.
The whole idea with the focus on the field through the labels, is the mapping of the for attribute with the id attribute. The name attribute alone is not going to cut it. Since id has to have a unique value on the page, I ended up at 5.
<label for="test5">
Test 5
</label>
<!-- name="test4" -->
<select id="test5">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
</select>
So you can simplify your logic with:
$('input, select, textarea').on('focus blur', function (){
var el = $(this),
field = el.closest('.field');
field.toggleClass('hasfocus');
});
You can keep the .control.hasfocus:before to disable this effect on .control classes.
Hope this helps.
DEMO
I have a custom jquery-plugin that will hide the real checkbox and show an enhanced component instead of the real one.
for this code
<label for="local">
<input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')" name="local" id="local"><span>Local</span>
</label>
The plug-in generates this code ( it adds a div with on top of the checkbox )
<label for="local">
<div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
<input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>
the big square is the fake one ( shown to the user ) and the small square is the real one.
the real checkbox will be hidden to the user.
The problem is: when I click on the real one ng-change works But when I click on the fake one ng-change does not work although the real one gets checked too.
How much can you change the jQuery plugin?
The generated code has an ng-click="filterByCoursePlace('test'), that's why if you click on the real one works.
The quickest way to do what you want is to remove every ng-change/ng-click add in your controller a watch:
$scope.$watch('value', function(newVal, oldVal) {
filterByCoursePlace('test')
});
Or if you can change how the plugin generates the code you could add the ng-click to the fake checkbox instead of the real one.
Anyway, if you want to trigger filterByCoursePlace also when value is changed by another function (like a 'resetFilters' button), I would go with the $scope.$watch way.
I ended up showing the real checkbox on top of the fake one and make it invisible with css( opacity = 0)
That's not the perfect solution but it worked.
We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.
I have had a look at the Wijmo Docs but they haven't been helpful.
We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.
The initiation script is as follows:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$("select").wijdropdown();
$(":input[type='radio']").wijradio();
$(":input[type='radio']").wijcheckbox();
$("button").button();
});
</script>
As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID - we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.
You can see a screenshot of the problem here:
I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.
I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.
I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the "rocket" theme that comes with Wijmo.
Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.
The HTML code for the form is:
<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
<label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
<br />
<select name="searchType">
<option value="standard">Standard</option>
<option value="fuzzy">Fuzzy</option>
</select>
<button>Search serial numbers</button>
<input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>
It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.
you need to wrap all the forms elements inside a div with let's say a class "input" and apply this style to the div elements:
div.input {
display: inline-block;
vertical-align: top;
}
here you can see a jsfiddle that shows how it looks like.
as a suggestion, next time create a jsfiddle more than a screenshot so it's easier for people and for you to test your code.
I saw some results via the related questions but didn't actually seem to show what I want.
Looking for a way to simply style the button in all major broswers easily.
<input type="file" name="file" id="file" size="29" class="formButton" />
<span class="smalltext">(.txt only)</span>
I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?
Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.
Don't try this!
Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!
It's best to let the native file widget show through.
The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.
Actually, with JqueryUI you can do it by simply:
Javascript for rollover (not required):
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
Button Code:
<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">
Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.