Jump to content
tron1000

PageTable Field and Frontend Editing Layout

Recommended Posts

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

Share this post


Link to post
Share on other sites

I tried with <edit fields="table">test table field</edit>    and can't replicate. maybe you should try with the latest PW version?

  • Thanks 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By louisstephens
      So I ran into a very strange issue today. I have a template with a pagetable and I went to add an item to it, when I went to select an image (for an image field) the page instantly threw up an error
      "ProcessPageSearchLive: No search specified"
      The page's content also switched to the image attached. This all worked perfectly last week (local mamp box). Has anyone experienced this before, and how did you solve it?
       

    • By jploch
      Hey folks,
      I have a question regarding rendering of template files that are in a subfolder of the template folder.
      How would I for example render these PageTable items, when their template files are inside templates/blocks/:
      <div class="grid"> <?php foreach($page->grid_ext as $item): ?> <div id="pteg_<?= $item->id ?>"> <?php echo $item->render(); ?> </div> <?php endforeach; ?> </div> I tried this, but get an error:
      <?php echo $item->render(wire('config')->paths->templates . '/blocks/'); ?>  
    • By AndréPortuga
      Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 
      I mean I have a Iframe with this code:
      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
       
      but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?
       
      Thank you,
    • By eutervogel
      Hi, 
      what I'm doing is this:
       
      <picture> <source srcset="<?php echo $page->section_three->main_img->first()->size(396,710)->webp->url; ?>" type="image/webp"> <img class="p_absoulte pp_block" src="<?php echo $page->section_three->main_img->first()->size(396,710)->url; ?>" alt=""> </picture> and for some reason it sometimes becomes this:
      <picture> <source srcset="/site/assets/files/1057/sektion3_bild-1.396x710.png" type="image/webp"> <img class="p_absoulte pp_block" src="/site/assets/files/1057/sektion3_bild-1.396x710.png" alt=""> </picture> It seems to be related to ->size(). When I don't use ->size() the webp Url is correct.
      I'm using the image-field inside a Fieldset(Page). Could that be a problem too?
      I just increased the output size by 2px and voila the webp url comes up. 
      I deleted all variations (webp variation is present in correct size) changed it back to the original size and again: a png url.

      I also tried to rename the image and load it up agian. 
      ...same behavoir.
      Thanks in advance guys
       
    • By Mobiletrooper
      Hey Ryan, hey friends,
      we, Mobile Trooper a digital agency based in Germany, use ProcessWire for an Enterprise-grade Intranet publishing portal which is under heavy development for over 3 years now. Over the years not only the user base grew but also the platform in general. We introduced lots and lots of features thanks to ProcessWire's absurd flexibility. We came along many CMS (or CMFs for that matter) that don't even come close to ProcessWire. Closest we came across was Locomotive (Rails-based) and Pimcore (PHP based).
      So this is not your typical ProcessWire installation in terms of size.
      Currently we count:
      140 Templates (Some have 1 page, some have >6000 pages)
      313 Fields
      ~ 15k Users (For an intranet portal? That's heavy.)
      ~ 195 431 Pages (At least that's the current AUTOINCREMENT)
       
      I think we came to a point where ProcessWire isn't as scalable anymore as it used to be. Our latest research measured over 20 seconds of load time (the time PHP spent scambling the HTML together). That's unacceptable unfortunately. We've implemented common performance strategies like:
      We're running on fat machines (DB server has 32 gigs RAM, Prod Web server has 32gigs as well. Both are running on quadcores (xeons) hosted by Azure.
      We have load balancing in place, but still, a single server needs up to 20 sec to respond to a single request averaging at around about 12 sec.
      In our research we came across pages that sent over 1000 SQL queries with lots of JOINs. This is obviously needed because of PWs architecture (a field a table) but does this slow mySQL down much? For the start page we need to get somewhere around 60-80 pages, each page needs to be queried for ~12 fields to be displayed correctly, is this too much? There are many different fields involved like multiple Page-fields which hold tags, categories etc.
      We installed Profiler Pro but it does not seem to show us the real bottleneck, it just says that everything is kinda slow and sums up to the grand total we mentioned above.
      ProCache does not help us because every user is seeing something different, so we can cache some fragments but they usually measure at around 10ms. We can't spend time optimising if we can't expect an affordable benefit. Therefore we opted against ProCache and used our own module which generates these cache fragments lazily. 
      That speeds up the whole page rendering to ~7 sec, this is acceptable compared to 20sec but still ridiculously long.
      Our page consists of mainly dynamic parts changing every 2-5 minutes. It's different across multiple users based on their location, language and other preferences.
      We also have about 120 people working on the processwire backend the whole day concurrently.
       
      What do you guys think?
      Here are my questions, hopefully we can collect these in a wiki or something because I'm sure more and more people will hit that break sooner than they hoped they would:
       
      - Should we opt for optimising the database? Since >2k per request is a lot even for a mysql server, webserver cpu is basically idling at that time.
      - Do you think at this point it makes sense to use ProcessWire as a simple REST API?
      - In your experience, what fieldtypes are expensive? Page? RepeaterMatrix?
      - Ryan, what do you consider as the primary bottleneck of processwire?
      - Is the amount of fields too much? Would it be better if we would try to reuse fields as much as possible?
      - Is there an option to hook onto ProcessWires SQL builder? So we can write custom SQL for some selectors?
       
      Thanks and lots of wishes,
      Pascal from Mobile Trooper
       
       
×
×
  • Create New...