I am using jquery-mobile(v1.3.1) that comes with primefaces mobile(v 0.9.5-snapshot). When I try to add icon, I always see name mentioned in attribute "data-icon" will appear as shown in the below pic. How to get rid of it?
<a id="menuSwitcher" href="javascript:void(0)" data-role="button" data-iconpos="left" data-icon="back" onclick="WBUI.menuToggler($(this))" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-hover-a ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" original-title=""> <span class="ui-btn-inner" original-title="">ToolBox</span></a>
Found out that the default icomoon css script (since I use it for other icons) has the following data attributes which I need to remove to avoid duplicate rendering.
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before
{
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Related
I am trying to make text selectable for copy and paste in my ionic app using user-select: text. This does work fine until the keyboard is opened. After that I can no longer select the text that I could before. This only happens with the iOS 12
html:
<ion-header padding-top>
<ion-navbar>
<ion-title *ngIf="!isSearchbarOpened">
ZipCode Lookup
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-searchbar showCancelButton="true" [(ngModel)]="searchQuery" (search)="onSearch($event)" placeholder="Enter zipcode" animated="true" (ionCancel)="isSearchbarOpened=false"></ion-searchbar>
<ion-row center>
<ion-col text-center>
<button padding ion-button (click)="getData(searchQuery)">Search</button>
<ion-row padding>{{result.city}} {{result.state}}</ion-row>
</ion-col>
</ion-row>
</ion-content>
css:
body {
-webkit-user-select: text; /* Chrome 49+ */
-moz-user-select: text; /* Firefox 43+ */
-ms-user-select: text;
user-select: text;
}
Select2 4.0 jQuery plugin
In (Mac) Chrome or Firefox, the multiple select box looks fine with default, selected values:
but in (Mac) Safari it looks like below (light gray bracket around what is the <input> element for typing in a search term.)
What is the preferred way (i.e. select2 option or select2 css) to get rid of this visual artifact: [] ?
The HTML element generated by select2 is this:
<span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 110px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<ul class="select2-selection__rendered">
<li class="select2-selection__choice" title="Text">
<li class="select2-selection__choice" title="Video">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="-1" autocomplete="off"
autocorrect="off" autocapitalize="off" placeholder=""
spellcheck="false" role="textbox" style="width: 0.75em;"/>
</li>
</ul>
</span>
</span>
I tried both of the below (now commented out) select2 options to no effect:
$j(".select2").select2({ // we're using the Select2 plugin
// minimumResultsForSearch: Infinity // has no effect on Safari
// placeholder: null // attempt two - no effect
});
The only select2 class styles overridden are:
<style type="text/css">
.select2 { /* select2 honors width CSS property */
font-size: xx-small;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice { /* The results container with MSP-chosen values */
margin-left: .2em;
padding: 0px 2px;
}
.select2-results__option { /* The list of available MSP choices */
font-size: xx-small;
margin-left: .2em;
padding: 0px 4px;
}
</style>
The answer comes courtesy of select2 gitHub Issues - Select box not displayed properly in safari #3459
Specifically, this line of css:
.select2-search__field {
-webkit-appearance: textfield;
}
Per Kevin Brown, added to 4.01 milestone
I've been trying for days now, but it won't work. I have a controlgroup containing some checkboxes, which are being bound with knockout.js:
<div data-role="content">
<div data-role="fieldcontain" data-bind="with:selectedList, jqmRefreshList:selectedList">
<fieldset data-role="controlgroup" data-bind="foreach: { data: items }" data-inset="true" data-filter="true" data-mini="true">
<input type="checkbox" data-bind="attr: {id:guid}, checked:isChecked" />
<label data-bind="text:value, attr: {for:guid}"></label>
</fieldset>
</div>
</div>
I'm using a "taphold" event, on which I want to open a popup:
$(document).on('taphold', '.ui-checkbox', function (event) {
$('#listitem-page #add-listitem-popup').popup('open', { transition: 'pop' });
});
The popup opens normally, but the big problem is that the checkbox is being checked as well. The checkbox should only be checked on a "tap" or "vclick", which is the default behaviour and seems to work fine. The problem is that when i taphold (long touch), the popup is opened, and at the moment I release my finger from the screen, the vclick is generated and the checkbox is checked.
I tried several things (on the right location in the document):
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
$.event.special.tap.emitTapOnTaphold = false;
.ui-checkbox {
-webkit-touch-callout: none !important;
}
.ui-mobile {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
in the vclick eventhandler (and the taphold eventhandler), but there seems no way to cancel the vclick from happening after I release my finger from the screen (taphold). Does anyone have suggestions? Thank you!
PS, the problem is on an Android device...
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
background-color: #ffeeee;
border:1px groove;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
How lighted field in a green color with succesfull validation? Add new option ".input-validation-valid" dont help. May be used special jQuery plugins? Thanks in advance for all your help
Assuming you using query validation and unobtrusive validation, when a field is valid the error message is removed from the DOM so there's nothing to style! A typical error renders this (note the <span> within a <span>
<span class="field-validation-error" data-valmsg-for="Account.Description" data-valmsg-replace="true">
<span for="Account_Description" generated="true" class="">Please enter a description</span>
</span>
When its valid, the inner span is removed and the class name changes to 'field-validation-valid'
<span class="field-validation-valid" data-valmsg-for="Account.Description" data-valmsg-replace="true"></span>
I have a line like this in my view:
<div class="contact">
<h6>#Model.Salutation</h6><h3>#Model.FirstName #Model.LastName</h3>
</div>
I am trying to achieve a Mr Tommy Jones, while Mr in a different formatting.
Such as below:
.contact h3 {
font-size: 1.1em;
}
.contact h6 {
font-size: 0.85em;
color: gray;
}
However I get a line break between Mr and rest, what do I have to do?
You have h6 tag followed by h3 tag. I'm thinking...is this a true header text? Are you using tags because of formatting instead of meaning?
Try to write:
<div class="contact">
<span class="title">#Model.Salutation</span><span class="name">#Model.FirstName #Model.LastName</span>
</div>
With following CSS (update to match required formatting):
.contact .title
{
font-size: 0.85em;
color: gray;
}
.contact .name
{
font-size: 0.85em;
font-weight: bold;
}
If you're using HTML 5 tags you may include microdata informations and use different tags too. Look this example (just updated with microdata):
<div class="contact" itemscope itemtype="http://schema.org/Person">
<span itemprop="title">#Model.Salutation</span>
<span itemprop="name">#Model.FirstName #Model.LastName</span>
</div>
Your CSS may be changed to:
div[itemtype="http://schema.org/Person"] > span[itemprop="title"]
{
font-size: 0.85em;
color: gray;
}
div[itemtype="http://schema.org/Person"] > span[itemprop="name"]
{
font-size: 0.85em;
font-weight: bold;
}
All h* are by default block elements, simply meaning that they will occupy a whole width of the container, pushing things to the left and right of it.
try adding display:inline to your h6 and h3
.contact h6, .contact h3 { display:inline }
h3 and h6 are both blocking elements, so either you change the display property of both to inline (which I don't recommend) or change your markup like this:
<div class="contact">
<h3><span class="salutation">#Model.Salutation</span> #Model.FirstName #Model.LastName</h3>
</div>
Styling only the span element.
Another possibility - if the information about «salutation» is not particular relevant in the context but it's just used to introduce the name for visualization purpose - is to use pseudoelements and place there that information like so:
<div class="contact">
<h3 data-salutation="#Model.Salutation">#Model.FirstName #Model.LastName</h3>
</div>
and the CSS
.contact h3 {
font-weight: bold;
}
.contact h3:before {
content: attr(data-salutation);
padding-right: 1em;
font-weight : normal;
}