BlockUI not Center on Screen With Mobiles or Tablet

Community Driven Extensions Project
Post Reply
nokiajavi
Posts: 61
Joined: 24 Feb 2013, 15:03
Location: España
Contact:

30 Apr 2019, 16:21

Good,

When I use a pe: blockUI, I have noticed that the content of the blockui is not correctly centered:

Example:

Code: Select all

<pe:blockUI widgetVar="blockUIWidget">  
			<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">  
				<h:graphicImage library="images" name="loading.gif"
					style="margin-right: 12px; vertical-align: middle;"/>  
				<h:outputText value="#{text['ruleta.espera']}" style="white-space: nowrap;"/>  
			</p:panelGrid>  
		</pe:blockUI>
The attribute left: 35% is applied by default, it should be calculated according to the size of the screen, that is, allow it to be used when it is responsive.

When a mobile is used, the left attribute causes the content of the blockui to be exited from the screen.

Any solution?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

30 Apr 2019, 16:46

You can try the CSS attibute.

css Styles for the message when blocking. Styles should be defined as JSON object, e.g. {backgroundColor: 'fff', width: '30%'}.

It takes a JSON object like...

Code: Select all

<pe:blockUI css=" {backgroundColor: 'fff', left:'20px'}"
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

nokiajavi
Posts: 61
Joined: 24 Feb 2013, 15:03
Location: España
Contact:

30 Apr 2019, 17:28

Melloware wrote:
30 Apr 2019, 16:46
You can try the CSS attibute.

css Styles for the message when blocking. Styles should be defined as JSON object, e.g. {backgroundColor: 'fff', width: '30%'}.

It takes a JSON object like...

Code: Select all

<pe:blockUI css=" {backgroundColor: 'fff', left:'20px'}"
It does not work either, it seems that it does not take the values entered in that property, nor does it put the id when I enter it, but I think it is because it is not inside any naming-container.

In the end I solved it with CSS and it is compatible with all screen resolutions

Code: Select all

/* Fix para que se muestra centrado el pe:blockui en todos los dispositivos*/
.pe-blockui{
	top: 50% !important;
	left: 50% !important;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}
Thanks!

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

30 Apr 2019, 17:38

Nice! because in there code that was their other suggestion.

Code: Select all

         // styles for the message when blocking; if you wish to disable
         // these and use an external stylesheet then do this in your code:
         // $.blockUI.defaults.css = {};
         css: {
            padding: 0,
            margin:     0,
            width:      'auto',
            top:     '40%',
            left:    '35%',
            textAlign:  'center',
            color:      '#000',
            border:     '3px solid #aaa',
            backgroundColor:'#fff',
            cursor:     'wait'
         },
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests