Stack Overflow
Stack Overflow

Questions tagged [primeflex]

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

PrimeFlex consists of various CSS utilities that can be combined with Prime UI libraries to craft spectacular applications in no time.

  • Utility First. Style classes for commonly used CSS properties.
  • Grid System. Responsive grid system optimized for all screen sizes.
  • Flexbox Utilities. Responsive flexbox based utilities to place and align your content.
  • Spacing. Apply paddings and margins with ease.
  • Elevation. Built-in shadows to define elevation and importance.
  • Font Utilities. Define font properties like size and styling.
  • Sizing. Specify width and height of an element in responsive fashion.
  • Color System. Integrated with the beautiful color palettes of Prime UI library themes.
  • Responsive. Optimized for all screens including desktops, tables and phones.
  • Form Layout. Exclusive layout utilities to create aesthetic forms.
  • Icons. Integration with PrimeIcons featuring over 200 icons.
  • Optimized Size. Minimize the production size by removing unused CSS.

https://www.primefaces.org/primeflex/

32 questions
1
vote
0 answers

importing Primeflex CSS file breaks PrimeVue CSS

I'm using PrimeVue for my Vue3 app and want to have a flexbox without using the toolbar component. When installing Primeflex and importing the CSS file the CSS of the PrimeVue components is broken. Working code without importing…
Question3r
  • 2,166
  • 19
  • 100
  • 200
1
vote
1 answer

PrimeFlex margin not working inside Vue3 app

I want to apply some margin on PrimeVue elements inside my Vue3 app. Based on the example from the docs https://www.primefaces.org/primevue/showcase/#/selectbutton I have a working example with a margin between the icon and the text
Question3r
  • 2,166
  • 19
  • 100
  • 200
1
vote
1 answer

Primeflex + PrimeNG tab + PrimeNG tree - unable to make tabPanel grow

Could someone help me with the layout of those PrimeNG components? I would like to have a tree taking the whole vertical space (minus buttonset at the bottom), scrolling if needed. Tree is being places inside a tab panel. Thanks in…
Kodak
  • 1,779
  • 2
  • 18
  • 29
1
vote
1 answer

Primeflex Flexgrid support for IE11? any workaround to get the flexgrid working on IE?

The columns alignment using "p-dir-col" does not display as expected in IE11. To reproduce, check out the demo page opened in Internet Explorer 11: https://www.primefaces.org/primeng/#/flexgrid => There are no space between each row in IE, while the…
patchy
  • 19
  • 5
0
votes
0 answers

vue 3 + vite build size with PrimeFlex SASS class reuse pattern

In spite of the very application-specific sounding title, I'm hopeful this is really a more generic VITE / SCSS question that some guru can help translate and share some knowledge with me. We are using PrimeFlex in our project and following the…
slumtrimpet
  • 3,159
  • 2
  • 31
  • 44
0
votes
0 answers

Primeflex css isn't loaded properly

i am new to angular, Typescript and the PrimeNG frameworks. i have the following issue: i installed primeNg, Icons and Primeflex. It is in my dependencies and i also added the .css files in my Styles [] section in angular.json. Primeflex and PrimeNG…
Ed H
  • 513
  • 2
  • 5
  • 7
0
votes
0 answers

customElements Bootstrap and Primeflex class names clash

I have an Angular App A, which I build using customElements to be used in Angular App B. The problem is that App A uses Primeflex and App B uses Bootstrap so that when I incorporate A in B, there will be certain elements from the A component that…
Adrian
  • 1
0
votes
1 answer

Place items on the right side by using PrimeFlex

I have the following structure of the js code in Angular. This is using PrimeFlex and I want to simply place test on the right side. [Code]
JBC
  • 33
  • 5
0
votes
1 answer

Problem with menu display on tableheader button primeng

I'm using Primeng and I can't display correctly this menu when the button is clicked. As you can see on this image, the menu displays outside of the table header far away from the button. What I need is the menu displays just below from the button…
Ricardo Ruíz Alarcón
  • 85
  • 8
0
votes
2 answers

Get buttons on right in p-header

This should be simple. I'm using Angular/PrimeNG 14 and PrimeFlex. I have a p-header in a p-panel. In the p-header I want text on the left and two buttons on the right. Here's the .html:
Dean Schulze
  • 9,633
  • 24
  • 100
  • 165
0
votes
0 answers

How to show selectOneMenu that occupy the entire width of the column in Primefaces

I need to display the selectOneMenu correctly and that the arrow is not placed between the text as it happens now. This is not pretty to look at. I send you the following image where you can see the wrongly placed selectOneMenu…
danimunoz
  • 1
  • 2
0
votes
0 answers

Change 3 fields from vertical to horizontal nicely in Primefaces

I would like to have the following fields horizontally, side by side. I can't get this to stay horizontal and this isn't pretty. Currently, I have the following fields vertically (see attached image)
danimunoz
  • 1
  • 2
0
votes
1 answer

Primeflex - Responsive design not working in mobile screen

I'm trying to use primeflex to design my web as a responsive application. When I test my application in my computer, it works well. But when I test my application in my mobile phone, it doesn't work well. It should paint the field one below the…
Eduardo
  • 1,169
  • 5
  • 21
  • 56
0
votes
1 answer

primeng primeflex add a reset css

In all the UI I have used up to now (bootstrap and material) a css reset was always included now for a new project the choice was on primeng with primeflex which has no reset as far as I could see. what is the best practice to include a default css…
user3887366
  • 2,226
  • 4
  • 28
  • 41
0
votes
1 answer

Angular styles problem (primeng - primeflex)

I am using primeflex, and in begin all go good, but now... i dont know what happen. Suddenly breaks. This styles arent catching by the elements of the html. The first example of grid system dont work:
Pevi
  • 45
  • 7
1
2
3