Giter Site home page Giter Site logo

primefaces / primeflex Goto Github PK

View Code? Open in Web Editor NEW
556.0 556.0 183.0 11.05 MB

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

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

License: MIT License

CSS 0.01% SCSS 8.25% JavaScript 91.75%
css utilities

primeflex's Introduction

Maven Actions Status CI Actions Status Integration Tests Sonar License: MIT Discord Chat Stackoverflow Prime Discussions

PrimeFaces Hero

PrimeFaces

This is an overview page, please visit PrimeFaces.org for more information.

PrimeFaces Logo

Overview


PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. Here are some of the users who notified us or subscribed to a PrimeFaces Support Service.

Community <> Elite <> Pro


This is the open source code and issue tracker of the PrimeFaces master (a.k.a. community version).
Please check the following link for informations about Elite and Pro: PrimeFaces Support

What does that mean?

  • PrimeFaces is developed by PrimeTek and the open source community.
  • The most contributers here on GitHub are working on PrimeFaces in their spare time.
  • PrimeTek pushes fixes and new features from their closed source Elite and Pro repositories to the community edition.
  • We, the community on GitHub, only provide support for issues, which are reproducable with the current SNAPSHOT (scroll down for more information on how to use it).
  • We are NOT able to port bugfixes to elite releases. This is up to PrimeTek and can e.g. be triggered with PrimeFaces PRO.

Versions


Version Binary Source JSF version Java version Documentation
14.0.x JAR Sources 2.3 - 4.0 11 - ? 14.0.0 Documentation
13.0.x JAR Sources 2.0 - 4.0 1.8 - ? 13.0.7 Documentation
12.0.x JAR Sources 2.0 - 4.0 1.8 - ? 12.0.0 Documentation
Archive
Version Binary Source JSF version Java version Documentation
11.0.0 primefaces-11.0.0.jar primefaces-11.0.0-sources.jar 2.0 - 4.0 1.8 - ? 11.0.0 Documentation
10.0.0 primefaces-10.0.0.jar primefaces-10.0.0-sources.jar 2.0 - 3.0 1.8 - ? 10.0.0 Documentation
8.0 primefaces-8.0.jar primefaces-8.0-sources.jar 2.0 - 2.3 1.8 - ? 8.0 Documentation
7.0 primefaces-7.0.jar primefaces-7.0-sources.jar 2.0 - 2.3 1.7 - ? 7.0 Documentation
6.2 primefaces-6.2.jar primefaces-6.2-sources.jar 2.0 - 2.3 1.6 - ? 6.2 Documentation
6.1 primefaces-6.1.jar primefaces-6.1-sources.jar 2.0 - 2.3 1.5 - ? 6.1 Documentation
6.0 primefaces-6.0.jar primefaces-6.0-sources.jar 2.0 - 2.2 1.5 - ? 6.0 Documentation
5.3 primefaces-5.3.jar primefaces-5.3-sources.jar 2.0 - 2.2 1.5 - ? 5.3 Documentation
5.2 primefaces-5.2.jar primefaces-5.2-sources.jar 2.0 - 2.2 1.5 - ? 5.2 Documentation
5.1 primefaces-5.1.jar primefaces-5.1-sources.jar 2.0 - 2.2 1.5 - ? 5.1 Documentation

For a full list of the available downloads, please visit the download page.

Maven


Release
<!-- Java EE / javax.* / JSF 2.2 - JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->	
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
    <classifier>jakarta</classifier>
</dependency>
SNAPSHOT
<!-- Java EE / javax.* / JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
    <classifier>jakarta</classifier>
</dependency>

<repositories>
  <repository>
    <id>sonatype-snapshots</id>
    <name>Sonatype Snapshot Repository</name>
    <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    <releases>
        <enabled>false</enabled>
    </releases>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>

Usage


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<h:head>

	</h:head>

	<h:body>

		<p:spinner />

	</h:body>
</html>

Demo


Please refer to the showcase in order to see the full usage of the components. Sources of PrimeFaces showcase are available within module primefaces-showcase.

Contribution


Visit the contribution page for detailed information.

Release Instructions


  • Run mvn versions:set -DgenerateBackupPoms=false -DnewVersion=14.0.0 to update all modules versions
  • Commit and push the changes to GitHub
  • In GitHub create a new Release titled 14.0.0 to tag this release
  • Run mvn clean deploy -Prelease to push to Maven Central
  • Rename Milestone in GitHub Issues and close it
  • Create a new Milestone

License


Licensed under the MIT License.

primeflex's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

primeflex's Issues

Center inputbox in p-col-12

I want to center an inputbox in a p-col-12, for example.

<div class="p-col-12" style="text-align: center">
     <div class="ui-inputgroup">
          <input pInputText type="text" value="20" style="text-align: right" size="8" />
          <span class="ui-inputgroup-addon"><i class="fa fa-euro"></i></span>
     </div>
</div>

But, if I do it with text, works:

<div class="p-col-12" style="text-align: center">
TEXT
</div>

Can someone help me?

.src folder seems to be exlcuded in node module

Error message from build

ERROR in ./node_modules/primeflex/primeflex.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: ./src/_variables.
        on line 1 of /node_modules/primeflex/primeflex.scss
>> @import './src/_variables';

Angular json styles

  "styles": [
 "src/style.css",
"shared_assets/sass/base.sass",
"node_modules/primeflex/primeflex.scss",
node_modules/primeng/resources/themes/nova-light/theme.css",              
"node_modules/primeng/resources/primeng.min.css",
"node_modules/quill/dist/quill.core.css"
],
Angular CLI: 9.1.2
Node: 10.19.0
OS: linux x64

Angular: 9.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.2
@angular-devkit/build-angular      0.901.9
@angular-devkit/build-optimizer    0.901.9
@angular-devkit/build-webpack      0.901.9
@angular-devkit/core               9.1.2
@angular-devkit/schematics         9.1.2
@angular/cdk                       9.2.1
@angular/material                  9.2.1
@angular/material-moment-adapter   9.2.1
@ngtools/webpack                   9.1.9
@schematics/angular                9.1.2
@schematics/update                 0.901.2
rxjs                               6.5.5
typescript                         3.7.5
webpack                            4.42.0

I was able to resolve this issue by updating my angular.json to use the css file instead and everything seems to be fine.

            "styles": [
              "src/style.css",
              "../shared_assets/sass/base.sass",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/quill/dist/quill.core.css"
            ],

Make more use of mixins to allow for easier extention

I have come from Clarity UI, and the way they had set up their SCSS while fairly complex also automates a lot of the extension work between each of the various breakpoints.

https://github.com/vmware/clarity/tree/next/packages/angular/projects/clr-angular/src/layout/grid/mixins

this allows to simply extend the breakpoints list and add new ones or update existing, and all values are worked out.
if something like this could be implemented that would greatly enable the use of more breakpoints across the system.
and remove issues with missing utilities for some breakpoints.

Dispkay not mobile devices not working as expected

Im using "primeflex": "^2.0.0" and im trying to hide an element inside a p-grid on smaller screens

<div class="p-col p-d-sm-none p-d-md-none"><img [src]="clientLogo" /></div>

however what im noticing is that on screen smaller than 576PX, the element is displayed

i've check the file primeflex.css and noticed the following

@media screen and (min-width: 576px) {
.p-d-sm-none {
    display: none !important;
  }
}

as most mobile screens are smaller than this is there another selector to target them?

Change log?

did a sweeping update of my packages, updated to version 3, but seems to have dropped all the p- tags?!?
1 this is a huge amount of fixing, but 2 there seems to be no documentation on this change?

primeng documentation says to install latest, but has code examples with p-.

How to set gap in 'p-grid'

<div class="p-grid">
  <div class="p-col-12 p-md-6 p-lg-3">A</div>
  <div class="p-col-12 p-md-6 p-lg-3">B</div>
  <div class="p-col-12 p-md-6 p-lg-3">C</div>
  <div class="p-col-12 p-md-6 p-lg-3">D</div>
</div>

image
There is not gap between all items.

but your demo show:
image

Angular 10 : Build error can't find stylesheet to import

Just migrated to angular 10 and got this error on build:

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--14-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--14-3!./node_modules/sass-loader/dist/cjs.js??ref--14-4!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import './src/_variables';
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/primeflex/primeflex.scss 1:9  @import
  /Users/aviral/projects/texma-material/texmamaterialclient/src/styles.scss 6:9                                  root stylesheet

p-shadow-? cannot be applied to p-card

Because the p-card already have a shadow the p-shadow-? cannot be applied.
<p-card styleClass="p-shadow-12">

Maybe all p-shadow-? should have a !important to override existing shadow ?

"Errno::ENOENT: No such file or directory - primegrid.scss"

Hello.I have installed primeflex through npm.However when I install it and including I get the error above.
After opening node_module I opened primegrid.css and it had the following content:


/*
Errno::ENOENT: No such file or directory - primegrid.scss

Backtrace:
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin/compiler.rb:454:in `read'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin/compiler.rb:454:in `update_stylesheet'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin/compiler.rb:209:in `each'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/plugin.rb:82:in `update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/exec/sass_scss.rb:340:in `watch_or_update'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/exec/sass_scss.rb:51:in `process_result'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/exec/base.rb:52:in `parse'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/lib/sass/exec/base.rb:19:in `parse!'
/Library/Ruby/Gems/2.0.0/gems/sass-3.5.5/bin/sass:13:in `<top (required)>'
/usr/local/bin/sass:23:in `load'
/usr/local/bin/sass:23:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Errno::ENOENT: No such file or directory - primegrid.scss"; }

Add additional breakpoints

Issue

Currently my team uses displays that are 3440px wide. It would be helpful to have another one or two breakpoints (eg. 2x & 3x) to cover the gap between 1200px and 3440px.

Current Breakpoints

p-sm-* : min-width 576px
p-md-* : min-width 768px
p-lg-* : min-width 992px
p-xl-* : min-width 1200px

p-nogutter in a p-col not setting padding to 0

Source code:
<p:outputPanel styleClass="p-col-2 p-nogutter"> <p:inputText id="middleName" value="#{testDatatableCntlr.contactCurrentlyEdited.midNameTxt}" maxlength="15" styleClass="width100" /> </p:outputPanel>
Generated HTML

<div id="j_idt287" class="ui-outputpanel ui-widget p-col-2 p-nogutter"> <input id="middleName" name="middleName" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all width100" maxlength="15" data-p-label="Middle Name" role="textbox" aria-readonly="false" aria-disabled="false"> &lt;/div>

Inspecting the code shows the source for .p-nogutter to be the version that kills the right, left, and top margins, not the padding

SCSS Variable override not working

I have followed the setup steps for overwriting SCSS variables from: https://primefaces.org/primeng/showcase/#/primeflex

The problem I have is that the variables in _overrides.scss are not overriding the PrimeFlex SCSS Variables.

I created a StackBlitz project to reproduce the issue: https://stackblitz.com/edit/bug-primeflex-scss-variable-overrides

As you can see the button has different padding styles for different breakpoints.
The breakpoints however are the default ones and not the ones from the _overrides.scss.

At first I tried to import the styles exactly like in the documentation but then I ran into another issue which might be related to this: #38

Add additional columns

Issue

My team is using primeflex to layout our page content into 3 or 4 columns that is responsive across all of the breakpoints. With only 12 columns, the 4 column layout makes some compromises to be responsive. See example below.

Would like to have a 24 column layout (or additional half size col and offset classes) for additional flexibility in sizing logical columns across several breakpoints.

4 Column Definitions

12 col layout

col4_1 = p-col-12 p-sm-3 p-md-3 p-lg-2 p-xl-1
col4_2 = p-col-12 p-sm-6 p-md-6 p-lg-4 p-xl-2
col4_3 = p-col-12 p-sm-9 p-md-9 p-lg-6 p-xl-3
col4_4 = p-col-12 p-sm-12 p-md-12 p-lg-8 p-xl-4

offset4_0 = p-offset-0 p-sm-offset-0 p-md-offset-0 p-lg-offset-4 p-xl-offset-8
offset4_1 = p-offset-0 p-sm-offset-3 p-md-offset-3 p-lg-offset-6 p-xl-offset-9
offset4_2 = p-offset-0 p-sm-offset-6 p-md-offset-6 p-lg-offset-8 p-xl-offset-10
offset4_3 = p-offset-0 p-sm-offset-9 p-md-offset-9 p-lg-offset-10 p-xl-offset-11
  • sm and md columns are the same size
  • xl can be pretty narrow near it's breakpoint with lg

24 col layout

col4_1 = p-col-12 p-sm-6 p-md-5 p-lg-4 p-xl-3 p-2x-2 p-3x-1
  • sm and md columns are different sizes
  • xl is slightly larger (1.5x)
  • There's room for additional future breakpoints

negative margin left and right often leads to a horizontal scrollbar

I've tried to use the p-grid class inside of several containers.
It happens often, that then a horizontal scrollbar will be displayed.
Even if you use it in a full screen container like:


 	<h:body>
 		<div class="p-grid">
  ...

I'm way no css specialist, designer, or anything similar, but is there any reason why you set:

margin-right: -0.5em;
margin-left: -0.5em;
margin-top: -0.5em;

When I disable the left and right margins the hoirzontal scrollbars disappear, and it also doesn't destroy anymore the design from the contrainer component. With those negative margins, it's usually to near to the border of the container component.

add !default keyword to sass variables

It could be a good idea to add the !default keyword to the variables declaration in the SASS file so the value of the variables can be overwritten by the application.

$sm: 576px !default;
$md: 768px !default;
$lg: 992px !default;
$xl: 1200px !default;
$gutter: .5em !default;

instead of

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$gutter: .5em;

See: https://robots.thoughtbot.com/sass-default

Does not work with node.js 11.x

After installing (in Angular) leads to the following error if node.js 11.x is used

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
at Function.Module._load (internal/modules/cjs/loader.js:513:25)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.sassLoader (.....node_modules\sass-loader\lib\loader.js:46:72)

Obvious reason: overwrites node-sass with older version which is not compatible with node.js 11.x
To fix, install latest node-sass right after installing primeflex:
npm install [email protected] --no-save
see: angular/angular-cli#12746

PrimeFlex cannot be used with Bootstrap together

Since the PrimeFlex is using p-sm-*, p-md-*, p-lg-* and p-xl-* selectors for its grid system it cannot be used together with Bootstrap because of collision with Bootstrap's Spacing utility. It uses those selectors as well but for spacing purposes.
The fix can be made by renaming all the PrimeFlex's grid selectors to p-col-*.

Missing padding-top-bottom inside .p-field.p-grid

There is an inconsistency in the formLayout.scss

Most columnsizes get padding-top and -bottom 0 when used inside .p-field-p-grid. But size 1, 7 and 9 only inside .formgrid.p-grid. I think there was a change not done on all places.

.p-field.p-grid .p-col-fixed,
.p-formgrid.p-grid .p-col-fixed,
.p-field.p-grid .p-col,
.p-formgrid.p-grid .p-col,
.p-formgroup .p-grid .p-col-1, 
.p-formgrid.p-grid .p-col-1, 
.p-field.p-grid .p-col-2,
.p-formgrid.p-grid .p-col-2, 
.p-field.p-grid .p-col-3, 
.p-formgrid.p-grid .p-col-3, 
.p-field.p-grid .p-col-4, 
.p-formgroup.p-grid .p-col-4, 
.p-field.p-grid .p-col-5, 
.p-formgrid.p-grid .p-col-5, 
.p-field.p-grid .p-col-6, 
.p-formgrid.p-grid .p-col-6,
.p-formgroup .p-grid .p-col-7, 
.p-formgrid.p-grid .p-col-7, 
.p-field.p-grid .p-col-8, 
.p-formgrid.p-grid .p-col-8, 
.p-formgroup .p-grid .p-col-9, 
.p-formgrid.p-grid .p-col-9,
.p-field.p-grid .p-col-10, 
.p-formgrid.p-grid .p-col-10, 
.p-field.p-grid .p-col-11, 
.p-formgroup.p-grid .p-col-11, 
.p-field.p-grid .p-col-12,
.p-formgrid.p-grid .p-col-12 {
    padding-top: 0;
    padding-bottom: 0;
}

If you like I can fix it and send a pullrequest.

Failed to install with node 12.18 with Invalid Package name

See debug log below.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/mjamsz/.nvm/versions/node/v12.18.1/bin/node',
1 verbose cli   '/home/mjamsz/.nvm/versions/node/v12.18.1/bin/npm',
1 verbose cli   'install',
1 verbose cli   '[email protected]',
1 verbose cli   '--save'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session a9cb292aa10a7188
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 304 https://registry.npmjs.org/primeflex 210ms (from cache)
8 http fetch GET 200 https://registry.npmjs.org/primeflex/-/primeflex-1.3.0.tgz 10ms (from cache)
9 silly pacote version manifest for [email protected] fetched in 229ms
10 verbose stack Error: Invalid package name "__ngcc_entry_points__.json": name cannot start with an underscore
10 verbose stack     at invalidPackageName (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:86:15)
10 verbose stack     at Result.setName (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:121:11)
10 verbose stack     at new Result (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:111:23)
10 verbose stack     at Function.resolve (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:58:15)
10 verbose stack     at computeVersionSpec (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/lib/install/deps.js:320:21)
10 verbose stack     at Installer.normalizeCurrentTree (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/lib/install.js:410:68)
10 verbose stack     at Array.<anonymous> (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/slide/lib/bind-actor.js:15:8)
10 verbose stack     at LOOP (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/slide/lib/chain.js:15:14)
10 verbose stack     at /home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/slide/lib/chain.js:18:7
10 verbose stack     at /home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/lib/install.js:368:5
10 verbose stack     at /home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/iferr/iferr.js:3:64
10 verbose stack     at cb (/home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
10 verbose stack     at /home/mjamsz/.nvm/versions/node/v12.18.1/lib/node_modules/npm/node_modules/call-limit/call-limit.js:28:43
10 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:79:11)
11 verbose cwd /home/mjamsz/dev/tefcor-ng
12 verbose Linux 5.6.19-300.fc32.x86_64
13 verbose argv "/home/mjamsz/.nvm/versions/node/v12.18.1/bin/node" "/home/mjamsz/.nvm/versions/node/v12.18.1/bin/npm" "install" "[email protected]" "--save"
14 verbose node v12.18.1
15 verbose npm  v6.14.5
16 error code EINVALIDPACKAGENAME
17 error Invalid package name "__ngcc_entry_points__.json": name cannot start with an underscore
18 verbose exit [ 1, true ]

Doesn't work with basic usage (includes used workaround)

I've created a simple project with angular-cli, includes the dependency and updated the angular.json. After this, I've used the grid as the example below:

<div class="p-grid">
    <div class="p-col-2">2</div>
    <div class="p-col-6">6</div>
    <div class="p-col-4">4</div>
</div>

The number 4 was expecting to be at the same line than the other, but it didn't happen.

It only worked after using this CSS rule in my styles.css:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

there is missing p-xl class that would be like p-col

I would like to use the following classes for my element: class="p-col-12 p-xl",so

  1. on mobile the element takes whole width
  2. but in case of desktop it takes proportional width with other elements in p-grid row.

It appears that p-xl, p-lg, p-md and p-sm are not defined.

In v3.0.0 horizontal of p-col breaks.

Below Example code also gives p-cols folded over with 100% width.

<div class="p-grid">
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">2</div>
    </div>
    <div class="p-col">
        <div class="box">3</div>
    </div>
</div>

Observed in multiple sites with similar behaviour.
Changed back to v.2.0.0 and it is normal. So please check the v3.0.0 for the unexpected behaviour.

p-fluid broke datatable search filter

Hello,

When you define a Datatable component with Primevue by ex inside a div with class p-fluid the filter choice width grow and normaly the width should stay the same as as in the primevue ex ( capture below )

image

But on my case

image

I just want to know if it exist a class to cancel the p-fluid one.

I could fix ".p-column-filter-overlay" with a defined size but it's not really the best practice :)

Thanks for your work

Mistake in p-formgrid with p-col-4

Every column sizing except p-col-4 is associated with p-formgrid. The p-col-4 has an association to p-formgroup. Indenting to show the pattern which is not maintained:

	.p-field.p-grid .p-col-fixed,
.p-formgrid.p-grid .p-col-fixed,
	.p-field.p-grid .p-col,
.p-formgrid.p-grid .p-col,
	.p-formgroup .p-grid .p-col-1,
.p-formgrid.p-grid .p-col-1,
	.p-field.p-grid .p-col-2,
.p-formgrid.p-grid .p-col-2,
	.p-field.p-grid .p-col-3,
.p-formgrid.p-grid .p-col-3,
	.p-field.p-grid .p-col-4,
-->	.p-formgroup.p-grid .p-col-4,
	.p-field.p-grid .p-col-5,
.p-formgrid.p-grid .p-col-5,
	.p-field.p-grid .p-col-6,
.p-formgrid.p-grid .p-col-6,
	.p-formgroup .p-grid .p-col-7,
.p-formgrid.p-grid .p-col-7,
	.p-field.p-grid .p-col-8,
.p-formgrid.p-grid .p-col-8,
	.p-formgroup .p-grid .p-col-9,
.p-formgrid.p-grid .p-col-9,
	.p-field.p-grid .p-col-10,
.p-formgrid.p-grid .p-col-10,
	.p-field.p-grid .p-col-11,
.p-formgroup.p-grid .p-col-11,
	.p-field.p-grid .p-col-12,
.p-formgrid.p-grid .p-col-12

Add bootstrap like container class

There should be a class that can be added so that there can be a slight margin if needed. Although this is possible with existing spacing classes it would be nice to have for a quick build.

Not working in Angular

I couldn't make the PimeFlex work in my project.

  • Command to install:
    npm install primeflex --save

After that the folder was installed perfectly in "node_modules" and save in "package.json":

"primeflex": "^1.0.0-rc.1",

  • I'm trying to use in my .html but is not working:

`

Dashboard - AR CONDICIONADO

<div class="p-grid">
  <div class="p-col-12 p-md-4">
    <div class="box">
      <p-card>
        <h4>Corrente: {{sensor?.current}}A</h4>
      </p-card>
    </div>
  </div>

  <div class="p-col-12 p-md-4">
    <div class="box">
      <p-card>
        Temperatura: {{sensor?.temperature}}ºC
      </p-card>

      <p-card>
        Umidade: {{sensor?.humidity}}%
      </p-card>

      <p-card>
        Bateria: {{sensor?.vBat}}V
      </p-card>
    </div>
  </div>

  <div class="p-col-12 p-md-4">
    <div class="box">
      <p-card>
        <div>Status: </div>
        <br>
        <div *ngIf="getAnomaly(); then true_content else false_content"></div>
        <ng-template #true_content><img width='20%' src="../../../assets/img/status_icons/error_red.png"></ng-template>
        <ng-template #false_content><img width='20%' src="../../../assets/img/status_icons/ok_green.jpg"></ng-template>
      </p-card>
    </div>
  </div>
</div>

<div class="p-col-12 p-md-12">
  <div class="margin">
    <h4>Valores no eixo X: {{requestNumber}}</h4>
    <p-slider [(ngModel)]="requestNumber" (onSlideEnd)="handleChange($event)" [step]="20" [min]="10" max="2000"
      [style]="{'width':'100%'}"></p-slider>
  </div>
</div>

<div class="p-col-12 p-md-12">
  <p-panel header="Corrente">
    <p-chart type="line" [data]="lineChartData" [options]="options"></p-chart>
  </p-panel>
</div>

<div class="p-col-12 p-md-12">
  <p-panel header="Diferença de Temperatura Interna e Externa">
    <p-chart type="bar" [data]="barChartData" [options]="options"></p-chart>
  </p-panel>
</div>
`

result:

image

I've tryied diverses combinations but none of primeflex has done effect. The result is always the same as the pic.

Responsive: Allow '0' to hide elements

Description
Sometimes, I'd like a component (or simply a div) to be shown only on desktop. I'd like it to disappear (at least visually) on mobile, and vice-versa.

Originally reported in Primefaces: primefaces/primefaces#6098

Consider this social login example, I'd like to show:

  • "Or sign in manually:" on mobile only (e.g., through a hypothetical <div class="ui-g-12 ui-md-0 ui-lg-0"/>
  • "Or:" on desktop only (e.g., through a hypothetical <div class="ui-g-0 ui-md-2 ui-lg-2"/>

Angular 10 build errors when using the scss files

I've followed the instructions in using the SCSS files instead of the CSS file from here: https://www.primefaces.org/primeng/showcase/#/primeflex

But when trying ng build it gives build errors. I've even tried creating the src/_overrides.scss but still getting errors

ERROR in ./node_modules/primeflex/src/flexbox/_flexbox.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/flexbox/_flexbox.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
17 │ @media screen and (min-width: $sm) {
   │                               ^^^
   ╵
  node_modules/primeflex/src/flexbox/_direction.scss 17:31  @import
  node_modules/primeflex/src/flexbox/_flexbox.scss 1:9      root stylesheet

ERROR in ./node_modules/primeflex/src/_display.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/_display.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
25 │ @media screen and (min-width: $sm) {
   │                               ^^^
   ╵
  node_modules/primeflex/src/_display.scss 25:31  root stylesheet

ERROR in ./node_modules/primeflex/src/_text.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/_text.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
55 │ @media screen and (min-width: $sm) {
   │                               ^^^
   ╵
  node_modules/primeflex/src/_text.scss 55:31  root stylesheet

ERROR in ./node_modules/primeflex/src/_formlayout.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/_formlayout.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
2 │     margin-bottom: $fieldMargin;
  │                    ^^^^^^^^^^^^
  ╵
  node_modules/primeflex/src/_formlayout.scss 2:20  root stylesheet

ERROR in ./node_modules/primeflex/src/_spacing.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/_spacing.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
2 │ .p-pt-1 {padding-top:$spacer * 0.25 !important;}
  │                      ^^^^^^^
  ╵
  node_modules/primeflex/src/_padding.scss 2:22  @import
  node_modules/primeflex/src/_spacing.scss 1:9   root stylesheet

ERROR in ./node_modules/primeflex/src/_grid.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/primeflex/src/_grid.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
7 │     margin-right: -1 * $gutter;
  │                        ^^^^^^^
  ╵
  node_modules/primeflex/src/_grid.scss 7:24  root stylesheet

Container - Container-fluid Class (proposal)

Hello as far i see, primeflex don't have a "container" and "container-fluid" class as "Bootstrap" or "Bulma".

Is it possible to integrated it ?

Here below a quick implementation to suit to my need. But it could be written more elegantly :)

.p-container-fluid
{
width:100%;
}
.p-container
{
margin: auto !important;
}
@media (min-width: 1200px) {
.p-container
{
max-width: 1140px;
width: 1140px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.p-container
{
max-width: 960px;
width: 960px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.p-container
{
max-width: 720px;
width: 720px;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.p-container
{
max-width: 540px;
width: 540px;
}
}
@media screen and (max-width: 576px) {
.p-container
{
max-width: 95%;
width: 95%;
}
}
.p-container-sm
{
margin: auto !important;
}
@media (min-width: 1200px) {
.p-container-sm
{
max-width: 1140px;
width: 1140px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.p-container-sm
{
max-width: 960px;
width: 960px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.p-container-sm
{
max-width: 720px;
width: 720px;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.p-container-sm
{
max-width: 540px;
width: 540px;
}
}
@media screen and (max-width: 576px) {
.p-container-sm
{
max-width: 95%;
width: 95%;
}
}
.p-container-md
{
margin: auto !important;
}
@media (min-width: 1200px) {
.p-container-md
{
max-width: 1140px;
width: 1140px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.p-container-md
{
max-width: 960px;
width: 960px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.p-container-md
{
max-width: 720px;
width: 720px;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.p-container-md
{
max-width: 95%;
width: 95%;
}
}
@media screen and (max-width: 576px) {
.p-container-md
{
max-width: 95%;
width: 95%;
}
}
.p-container-lg
{
margin: auto !important;
}
@media (min-width: 1200px) {
.p-container-lg
{
max-width: 1140px;
width: 1140px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.p-container-lg
{
max-width: 960px;
width: 960px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.p-container-lg
{
max-width: 95%;
width: 95%;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.p-container-lg
{
max-width: 95%;
width: 95%;
}
}
@media screen and (max-width: 576px) {
.p-container-lg
{
max-width: 95%;
width: 95%;
}
}
.p-container-xl
{
margin: auto !important;
}
@media (min-width: 1200px) {
.p-container-xl
{
max-width: 1140px;
width: 1140px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.p-container-xl
{
max-width: 95%;
width: 95%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.p-container-xl
{
max-width: 95%;
width: 95%;
}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
.p-container-xl
{
max-width: 95%;
width: 95%;
}
}
@media screen and (max-width: 576px) {
.p-container-xl
{
max-width: 95%;
width: 95%;
}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.