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
Related
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
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've been using for some time a "BEM like" syntax in my projects. Recently, I was just re-reading some CSS articles when I saw this: https://en.bem.info/methodology/css/#single-responsibility-principle
Basically, instead of putting all the styles of header__button inside that class, it also relays on styles from button class. Aren't we in this case coupling the element of header with the button class? That means that if in the future, we're gonna change the button class, we also need to remember exactly where we're using this class.
In this example maybe it makes sense because you're trying to have the same styles, but what about a layout component? For instance, let's suppose that I have a Menu class that position some children vertically, and I have a Sidebar class that's also going to apply some style to those children. And we use them like this:
menu.css
Menu {
}
Menu__item {
}
sidebar.css
Sidebar {
}
Sidebar__item {
}
index.html
<div class="Menu Sidebar">
<div class="Menu__item Sidebar__item">
</div>
<div class="Menu__item Sidebar__item">
</div>
</div>
If we don't put all the code about how to position items in the Sidebar class and in the future we change some of this code from Menu, maybe the Sidebar class is going to be broken. In the other case, if we repeat code in both classes Menu and Sidebar we're violating the SRP (single responsibility principle) discussed at the begging of the question. That's what lately, in my projects, I've been favoring code duplication, so I would write all the code needed for a Sidebar into the Sidebar class.
But, what would be the best practice here?
There's also a chapter which partially answers your question: https://en.bem.info/methodology/css/#external-geometry-and-positioning
In your example I'd day Sidebar should be responsible for Menu positioning but it shouldn't know anything about Menu__items. And Menu in its turn should not know anything about its own positioning but should position its items inside.
If you really need to change something in Menu__item positioning when it's inside Sidebar use nested selectors:
.Menu {
}
.Menu__item {
}
.Sidebar {
}
.Sidebar .Menu__item {
}
I think, you should decide, what is it: menu or sidebar, and use one of these classes. If blocks are different a bit, you should use modifiers. If it is impossible to do this with modifiers, use two different classes.
Using modifiers:
// your menu
.menu { }
.menu__item { }
// your sidebar
.menu--some-modifier { }
.menu__item--some-modifier { }
//
.sidebar__menu {
// set some styles (margins, positioning) for .menu
}
Two independent different blocks:
// your menu
.menu { }
.menu__item { }
// your sidebar
.sidebar { }
.sidebar__item { }
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;
}
Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?
I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:
.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }
Many thanks!
EDIT
Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.
CSS does not have such a feature.
What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:
li { font-size: 10pt; }
.dock li { color: #ff0000; }
All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.
My second suggestion is that you try applying two or more classes to your HTML element, for instance:
.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }
Now put the grid and dock class into your HTML, and the elements will apply both style definitions:
<ul class="grid dock"> ...
Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).
maybe your question is not too strange..
What I understand is that you want to do something like:
.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }
You want the class .c to inherit all the properties and values of .a and .b
If this is ok, you can do that using LESS.
To use your LESS code in your sites you have different ways to do it.
First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage
Hope it helps.
Happy coding y'all! :)