Template Pages not working in Bootstrap V3

Post Reply
david.molloy@dcu.ie
Posts: 2
Joined: 15 Aug 2019, 20:04

31 Mar 2020, 14:47

Some of the template pages are not displaying correctly as they are having CSS issues with the background images it appears.
This effects:
+ Wizard
+ Login Page
+ Page not found
+ Error page
+ Access Denied

To replicate:
- Visit: https://www.primefaces.org/avalon-ng/#/
- Using the right hand settings menu, change Bootstrap Version to v3
- Visit the above pages

Without the change to v3 they function correctly.

Many thanks.

merve7
Posts: 628
Joined: 12 Sep 2017, 10:44

06 Apr 2020, 11:11

Hi,
Thank you so much for your feedback. We will fix and update today.

enginy
Posts: 1
Joined: 17 Aug 2020, 13:51

18 Aug 2020, 16:38

Hi,

I'm having a similar issue. I have the Poseidon template installed and all is working fine but the Login Page background. If I try to open the Login Page in the provided template pages (which has its own css and all) page is loaded fine. But when I try to implement the "same" page myself, image is not shown. I verified the image is there, by accessing via the url-path to that image and I can see that it is there. But somehow it's not showing in my UI. Attached the screenshot how it seems.

https://ibb.co/3dhHyX3
Image

Do I need to change any css given with the template?

Below is the my html to the login page:

Code: Select all

<div *ngIf="!isLoggedIn" class="login-body">
    <div class="login-panel ui-fluid">
        <div class="ui-g">
            <div class="ui-g-12 logo-container">
                <img src="assets/layout/images/login/login-logo.png">
            </div>
            <div class="ui-g-12">
                <input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget" placeholder="Username" [(ngModel)]="form.username">
            </div>
            <div class="ui-g-12">
                <input type="password" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget" placeholder="Password" [(ngModel)]="form.password">
            </div>
            <div class="ui-g-12 button-container">
                <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" (click)="login()">
                    <span class="ui-button-icon-left ui-c"></span>
                    <span class="ui-button-text ui-c">Sign In</span>
                </button>
                <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left blue-btn" (click)="forgotPassword()">
                    <span class="ui-button-icon-left ui-c"></span>
                    <span class="ui-button-text ui-c">Forgot Password</span>
                </button>
            </div>
        </div>
    </div>
</div>
Below is the "template" login page html, in case you need:

Code: Select all

<!DOCTYPE html>
<html>

  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>PrimeNG - Poseidon</title>

    <!-- Layout CSS -->
    <link rel="stylesheet" type="text/css" href="../theme/theme-turquoise.css">
    <link rel="stylesheet" type="text/css" href="../layout/css/layout-turquoise.css">
    <link rel="stylesheet" type="text/css" href="primeng.min.css">
  </head>

  <!-- 3. Display the application -->
  <body class="login-body">
      <div class="login-panel ui-fluid">
          <div class="ui-g">
              <div class="ui-g-12 logo-container">
                  <img src="../layout/images/login/login-logo.png">
              </div>
              <div class="ui-g-12">
                 <input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget" placeholder="Username">
              </div>
              <div class="ui-g-12">
                  <input type="password" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget" placeholder="Password">
              </div>
              <div class="ui-g-12 button-container">
                  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                      <span class="ui-button-icon-left ui-c"></span>
                      <span class="ui-button-text ui-c">Sign In</span>
                  </button>
                  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left blue-btn">
                      <span class="ui-button-icon-left ui-c"></span>
                      <span class="ui-button-text ui-c">Forgot Password</span>
                  </button>
              </div>
          </div>
      </div>
  </body>

</html>

Please help,
Thanks.

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

10 Oct 2020, 02:44

Hi,

Could you please check the background css option of .login-body class in browser's inspector? It has login-background.png. Please check it. Also, could you please check if the picture has been uploaded? in the network tab in browser's inspector?

Best Regards,

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest