I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?
Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?
You could realize what you want like this:
jsfiddle
input {
border: #666 1px solid;
padding: 0.5em;
}
label {
display: block;
margin-top: 8px;
}
input + i:before {
display: none;
}
input:focus + i:before {
display: block;
}
input:focus:invalid {
background: red;
}
input:focus:valid {
background: lightgreen;
}
input:focus:valid + i:before {
content: "\f14a";
}
I've used the fontawesome iconfont here.
EDIT
To make the icons inside the form elements you can add this rule:
input + i {
position: relative;
left: -20px;
}
Related
.App {
text-align: center;
** --amenalBlue: #15426C;
--amenalOrange: #D9A460;**
}
h2,h3{
color: gray;
}
/* common table head style */
.tableHead {
*** background-color: var(--amenalOrange);***
}
.tableHead th {
color: var(--amenalBlue);
font-weight: bold;
}
Table head is not taking custom color which i have added but normal hex code is taking. This is happning in MUI table used inside MUI dialog
How can TH style name/s of a GWT CellTable's heading be looked up programatically?
I have looked at the Client Bundle documentation but it isn't immediately obvious to me how it all fits together. Thanks.
Not sure exactly what you want to do when accessing the TH style names.
If you want to override the standard css style of a celltable header, here are some of the css styles you can override to change the Look and Feel of the component.
.cellTableFirstColumnHeader {}
.cellTableLastColumnHeader {}
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
Here is the complete list of styles for cellTables CellTable.css
Now if you want to access you header programmatically, you can use this solution to get the TableSectionElement corresponding the the Header of your table. Then you can access the row, then the cells, and lookup for their styles I guess.
Last thing if you want to override the header style, maybe you can use the following method when adding your column to your table
public void addColumn(Column<T, ?> col, Header<?> header)
Then create your Header or use a TextHeader for example then set your style on it before adding it to the table using
public void setHeaderStyleNames(String styleNames)
Example
TextHeader textHeader = new TextHeader("headerTitle");
textHeader.setHeaderStyleNames("my-style");
myTable.addColumn(myColumn, textHeader);
Easy solution:
import com.google.gwt.user.cellview.client.CellTable.Resources;
private String getCellTableHeaderStyle() {
Resources res = GWT.create(Resources.class);
return res.cellTableStyle().cellTableHeader();
}
I'm having problems with IE9 ignoring the select borders when printing a multiple select.
Here's how to recreate the problem:
Open IE9 on Windows 7.
Go to w3schools's multiple select edit page.
Now highlight the options and copy/paste until there is a long list of duplicates.
Then remove the size attribute.
Click on "Edit and Click Me" so that the page reloads and you now have your modified select in the second panel.
Now, print the document (even using the XPS viewer).
For me, all of the options are printed on the page, even though the select is only 4 option elements tall. This still happens to some degree if you leave the "size" attribute at the default value of 2, but it's far more obvious when it is changed or removed.
Is anyone else experiencing this? Is this an IE bug? Does anyone know of a workaround?
You can work around this by viewing the site in IE9's compatibility mode. Usually IE will determine that it cannot display a site properly and give you the option to turn on compatibility mode from within the address bar but sometimes you need to explicitly set it.
How to turn on compatibility mode - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - I used the first one in method 2.
There doesn't seem to be any CSS solution for this. Instead, I wrote a small jQuery script that copies the <select multiple> contents into a <div>, so that it can be printed. Then I applied some CSS to make it look like a select, and only show the copy when actually printing.
Script:
//jQuery required
$(function() {
if(!$.browser.msie) return false;
$('select[multiple]').each(function() {
$lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');
//update printable on changes
$(this).after($lPrintableDiv).change(function($aEvent){
updatePrintable($aEvent.target);
});
//run once on load
updatePrintable(this);
});
});
function updatePrintable($aTarget) {
var $lSelect = $($aTarget);
var $lSelected = $($aTarget).val();
var $lPrintable = $('[data-for="'+$aTarget.id+'"]');
$($lPrintable).width($lSelect.width()).height($lSelect.height());
$($lPrintable).html('');
$($aTarget).children().each(function($lElm){
$lVal = $(this).val();
$lLabel = $('<label />').text($lVal);
$lOption = $('<input type="checkbox" />').val($lVal);
if($(this).is(':selected'))
$lOption.prop('checked', true);
$lPrintable.append($lOption).append($lLabel);
});
}
CSS:
.printable {
border: 1px solid grey;
display: none;
overflow: auto;
}
.printable label {
display: block;
font: .8em sans-serif;
overflow: hidden;
white-space: nowrap;
}
.printable [type="checkbox"] {
display: none;
}
.printable [type="checkbox"]:checked + label {
background: #3399ff;
color: white;
}
#media print {
select[multiple] { display: none; }
.printable { display: inline-block; }
.printable [type="checkbox"]:checked + label { background: grey; }
}
Also see the jsFiddle and original post about this fix
I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.
Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?
Taken from here
$("#search_input").autocomplete({source: "/search",
minLength: 3,
select: function (event, ui) {
document.location = ui.item.url;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be
//.autocomplete( "instance" )._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
.appendTo(ul);
};
And the CSS:
.ui-menu .ui-menu-item-with-icon a {
padding-left: 20px;
}
span.group-item-icon,
span.file-item-icon {
display: inline-block;
height: 16px;
width: 16px;
margin-left: -16px;
}
span.group-item-icon {
background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
background: url("/image/icons/product.png") no-repeat left 7px;
}
I'm using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I'd like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
the showPageByHref() answer is partially correct.
But, instead of
$('body').append('<div id="loadinginprogress">Loading...</div>');
You need
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short - add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later "success" or "error". the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options) {
...
if (href != '#'){
$('body').append('<div id="loadinginprogress">Loading...</div>');
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus) {
$('#loadinginprogress').remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)
{
if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
{
settings.$referrer.attr('href', '#' + firstPage.attr('id'));
}
if (settings.callback) {
settings.callback(true);
}
}
},
error: function (data) {
$('#loadinginprogress').remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback) {
settings.callback(false);
}
}
});
}
...
}
css for loading div would be something like:
#loadinginprogress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;
}
This is the basic behavior if your links are li class="arrow" elements. how are you displaying your links and where do you want the loading-spinner to display?
Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies.
It uses jQuery ajax capabilities.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
more details available in this jQuery doc page.
You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.
I just answered Darin Parker's question. Just check it out it may help you.