Jump to content

PageTable Field and Frontend Editing Layout

tron1000

By tron1000,
in General Support

 Share

Recommended Posts

tron1000 Jr. Member

tron1000

Posted
Posted

Hello! I use PW 3.0.98 and I have frontend editing enabled for a PageTable Field. Somehow, when I double click the field in the frontend, the iframe in wich the content is displayed is very small (see screenshot). I couldn't find out if thats some CSS conflict or another problem. Any suggestions? Thanks, Andrej

 

Bildschirmfoto 2018-08-24 um 18.58.07.png

Link to comment
Share on other sites
tron1000 Jr. Member

tron1000

Posted
  • Author
Posted (edited)

Hi matjazp! Thanks for your reply! I tried both (the «edit» part and PW 3.0.111 DEV) but it looks the same. So maybe this issue is specific to my setup … I use Zurb Foundation too, maybe there is some conflict there …

Although I disabled all CSS and it still looked the same (Safari, Firefox and Chrome).

Edited by tron1000
Link to comment
Share on other sites
dragan Hero Member

dragan

Posted
Posted (edited)

Try to find the culprit in the inspector: Is a CSS-rule overriding another one? Which CSS causes this?

If you see inline-styles:

a) look at the rendered source via inspector (CTRL + SHIFT + C)

b) compare it to the raw HTML source-code, as it is being delivered by the server, i.e. before any JS had a chance to manipulate the DOM (before any window.load or document.ready has been applied). In Chrome, the keyboard shortcut is CTRL + U.

If you don't see any inline-styles in b), it means some JS is triggered to alter the iFrame styles (or something near there). CTRL + SHIFT + J

And of course, check the console for JS errors or warnings.

Edited by dragan
added keyboard shortcuts
  • Like 1
  • Thanks 1
Link to comment
Share on other sites
tron1000 Jr. Member

tron1000

Posted
  • Author
Posted

Hi dragan! Thanks a lot for your help! Ich checked the source code and found inline styles setting the iframe's width to «auto»: 

<iframe class="pw-modal-window ui-dialog-content ui-widget-content" frameborder="0" src="/preview/backend/page/edit/?id=1044&amp;fields=events&amp;modal=1" id="pw-modal-window-1" style="width: auto; min-height: 0px; max-height: none; height: 813.03125px;"></iframe>

I realized that the only thing that prevents the error is to remove jquery.js from the head section: 

<script src="<?php echo $config->urls->templates?>node_modules/jquery/dist/jquery.js"></script>

I have no idea how / why this happens. The version of the linked jquery is 3.3.1.

Edit: here is the complete source code with all js and stylesheets removed except for the mentioned jquery link. This still produces the bad layout: 

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zimoun</title>
    <script src="<?php echo $config->urls->templates?>node_modules/jquery/dist/jquery.js"></script>
  </head>
  
  <body>
    
    <a id="button"><i class="fas fa-arrow-up fa-lg"></i></a>
    
    <a href="#" class="menu-button" id="menuButton" data-toggle="offCanvasRightSplit2"><span class="burger-icon"></span></a>
    
    <div class="grid-x">
      <div class="cell">
        <h1 id="logotype"><a href="<?php echo $pages->get("/")->url; ?>">Zimoun</a></h1>
      </div>
    </div>
    
    <div class="grid-x">
      <div class="cell content">
        <edit fields="events">
        <h1>Current and upcoming</h1>
        <?php
        $today = time();
        
        foreach($page->children("include=hidden")->find("date_to>$today") as $event) {
          
          if($event->event_url) {
          
          $website = "<br><a class='event_website' href='{$event->event_url}' target='_blank'>Website</a>";
          
          }
          
          else $website = "";
                     
          
          if($event->date_from != $event->date_to) {
            
            echo "<p>$event->title<br>$event->event_type, {$event->date_from}–{$event->date_to}$website</p>";
            
          }
          
          else
          
          echo  "<p>$event->title<br>$event->event_type, {$event->date_to}$website</p>";
        
        }
        ?>
        <div class="disclaimer_events">All information based on current knowledge and subject to change.</div>
        </edit>
      </div>
    </div>
    
    <div class="off-canvas position-right" id="offCanvasRightSplit2" data-off-canvas data-close-on-click="true">
      <?php include "nav.inc"; ?>
    </div>
    
    
  </body>
</html>

 

Link to comment
Share on other sites
tron1000 Jr. Member

tron1000

Posted
  • Author
Posted

Well, it's definitely a problem with jquery 3.3.1. I replaced it with version 2.2.4 via CND and now everything looks good. I use Zurb Foundation, but since the error still occurs even after removing all styles and scripts except for jquery, it can't be related to Foundation, right? Thank you all for helping!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...