Jump to content

PageTable Field and Frontend Editing Layout


tron1000
 Share

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

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

 

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By joe_ma
      Sorry for asking this question here, but I cannot ask it in the VIP section because I use an version of FormBuilder that is expired.
      I have a fairly simple form on a website done with FormBuilder (PW 3.0.148, FormBuilder 0.2.4) that seems to work quite well. I've tested it with Firefox (88.0.1), Chrome, Opera, Edge and it works in all browsers as expected. The form is embedded in the page by pasting the name of the form in the body field.
      Now my customer tells me, that her Firefox (88.0.1) is blocking the page where the form is embedded: "Firefox may not open this page" for safety reasons.
      I have no clue as to what seems to be the problem here, since the form is on the same server and has the same domain.
    • By daniel_puehringer
      Hi community,

      I am using the "PageTable" Module (also called "ProFields: Page Table") and the built in "Language" Module (also called "Languages Support").

      With the help of PageTable I was able to create several content elements which should usually be displayed in German(default language) and English.

      However some Content Elements should only be shown in German and NOT in English.

      Well sounds easy, right? Not so fast. I really love this CMS, but I have not found a solution for this problem yet.
      As you can see in the screenshots attached I tried to uncheck the "active" Checkbox for the english language to completely hide the content element for english users.

      However no matter what I do the german text shows on the english page.
      If I leave the "content-should-not-be-shown-in-english"(see Screenshot Number 2) blank and save the page, the page will inherit the german page url "content-element-with-simple-text-which-should-only-be-shown-in-german".

      My question therefore is:
      How can I hide a specific content-element for only one language?

      I´m using the latest processwire & module versions.

      The code which I use to render the content elements looks like this:
      //Info: contentelements is a field of type "ProFields: Page Table" <?php foreach ($page->contentelements as $element): echo($element->render()); endforeach; ?> filename: basic-page.php


      I would really appreciate your help since I haven´t found a solution after reading through quite a lot of forum posts.

      All the best,
      Dani


    • By LAPS
      I opened a new wishlist topic on the PW forum for this and in the meantime I ask to the community looking for a reasonable solution.
       
      Using the PageTable field, is there a way to un-restrict the creation of pages under a given parent template page (or as page children if no parent for items is selected)? That is, is there a way to allow the selection of the parent page dynamically / on the fly during page creation via the PageTable field?
    • By LAPS
      I'm using the PW PageTable field extensively and I think an improvement to it could be made regarding the ability to choose the page parent where the page created via PageTable will reside.
      Say you have a PageTable field set like this:
      Edit Field: page_table_field > Details >
      Select one or more templates for items
      > template_one
      > template_two
      > template_three
      Select a parent for items
      > parent_template
      Actually, you can only create pages under the parent_template page (or as page child if no parent for items is selected).
      BTW I am looking for reasons about this limitation.
      What about allowing to choose on the fly where the pages created via PageTable will reside? that is, having the possibility to choose dynamically under which parent page to create the pages?
      Actually, one could overcome to this by creating multiple appropriately set PageTable fields, one PageTable field per PageTable parent for items, but this is unsustainable (?) when you want to create a lot using PageTable…
      By allowing to choose dynamically / on the fly the parent page during page creation via the PageTable field would open up a wider usage of PageTable.
      What do you think about?
       
      @ryan @Robin S
    • 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?
       

×
×
  • Create New...