Is it possible to implement jqGrid search without operators? I need the operator to default to 'contains'. I don't want to modify the original jqgrid js or css files because they will be overwritten when we upgrade to a new version.
I need the dialog to look like this:
I can override displaying the operators dropdown by defining:
.operators
{
display: none;
}
I need to also adjust the width.
Ok this seems to work although it will change the default width for all jqgrid dialogs:
.operators
{
display: none;
}
.ui-jqdialog
{
width:220px !important;
}
Related
Vaadin text field has a default underline. I want to remove it.
I am using it inside of a Vaadin combo box.
In dev tools I can see that a div with the attribute part="input-field" is the cause.
Setting it to display: none; works in the browser.
I can't seem to target it with code. I've tried the following:
`[part="input-field"] {
display: none !important;
}
.vaadin-text-field-container [part="input-field"] {
display: none !important;
}`
Add Viritin add-on (use latest version) to your project, and configure:
TextField field = new MTextField().withSpellCheckOff();
OR
you can use the low level API to configure the html element:
new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
"spellcheck", false);
I solved it by adding this module to the HTML file.
I placed this above the first script tag in the file.
<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
<style>
div::before, div::after {
display: none;
}
</style>
</template>
:before is the underline before the input has a value and :after is the line after.
Therefore this would disable both.
[part="input-field"] disabled the input and the value was not seen after selection.
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I need to select the targetDiv class in only some of my pages using only CSS.
I'm currently using the following, is there any way to write this CSS shorter?
.page-id-1 .targetDiv, .page-id-3 .targetDiv, .page-id-5 .targetDiv, .page-id-7 .targetDiv
{ display:none;}
You may use a common class between those pages, other than that there's no other way if HTML markup stay unchanged.
Also, if you are using SCSS, you may write this way:
.page-id-1, .page-id-3, .page-id-5, .page-id-7 {
.targetDiv {
display: none;
}
}
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
Is there an easy way to change the order of the sort and move buttons from the PrimeFaces picklist?
For better usability i need the buttons to be in this order:
Sort:
all up
up
down
all down
and for moving:
all to the right
right
left
all to the left
I am just the one who implements a dummy page and someone else has to implement as a PrimeFaces Component what i am designing here. So i don't want it to be a impossible task for the programmer.
There is no built-in buttonTemplate feature, you can change the order with css though.
Code:
.ui-picklist-button-add {
position:relative;
top:25px;
}
.ui-picklist-button-add-all {
position:relative;
top:-40px;
}
-> This is what 'Optimus Prime' says. His answer in the Prime Faces Forum on my question
you can try doing it with jQuery like that : JavaScript moving element in the DOM
Use firebug to find out all the classes of the buttons and its containers
for example try jQuery(".ui-picklist-target-controls .ui-picklist-button-move-top").insertAfter(".ui-picklist-target-controls .ui-picklist-button-move-top");
If want to patch the primefaces jar look at the PickListRenderer.java file look where they use the encodeButton method , and just re order the buttons...
although you will have to re patch it each time you'll want to upgrade
I am the same problem but still got pixel issues with different screens.
Using flexbox should be better than px change:
.ui-picklist-buttons-cell{
display: flex;
flex-direction: column;
}
.ui-picklist-button-add {
order:2;
}
.ui-picklist-button-add-all {
order:1;
}
.ui-picklist-button-remove {
order:3;
}
.ui-picklist-button-remove-all {
order:4;
}
Example: https://codepen.io/Frank_Worker/pen/abzYmYr