Jump to content
tuxy

UL list problem

Recommended Posts

Hello,

This is my first real project for a client, made with PW.

I have a (little) issue in the site.

In the screenshot below you can see in the footer menu, a little square (right).

post-3100-0-48923400-1425464728_thumb.pn

The menu is a inline UL and generated with this code:

<ul class="list-inline text-center extra">
  <?php
   $extra = $pages->get('/extra/'); 
   $children = $extra->children();

   foreach($children as $child) {
     echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
   };
  ?>

</ul>

I tested adding links manually, and then the square is removed.

<ul class="list-inline text-center extra">
  <li><a href="#">menu 1</a>
  <li><a href="#">menu 2</a>
</ul>

How can I remove this square, when the menu is generated by PW?

For the moment the site is in development, but you can see the square on your mobile phone on:

jolisa.market-locator.com

Regards,

Christophe

Share this post


Link to post
Share on other sites

You have a unicode line separator (U+2028, E2 80 A8) between ?> and </ul>, but your main problem is using Android :P

If you switch your editor to ANSI, it will show up as 
. Obviously, that doesn’t belong there. Just remove it and you’re good :)

  • Like 1

Share this post


Link to post
Share on other sites

Hi Jan Romero,

I don't know how can I remove this, i try delete unused characters (spaces ed.) and put the </ul> in a echo, but noting helps.  :-[

<?php
  $extra = $pages->get('/extra/'); 
  $children = $extra->children();
  echo "<ul class='list-inline text-center extra'>";
  foreach($children as $child) {
    echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
  };
  echo "</ul>";

The editor I used is Sublime Text.

But why is it only when PW the list generated? And not when I add a list manually?

I have the same issue in the Top navigation:

post-3100-0-68557800-1425637871_thumb.pn

And yes I have a GOOD Android device  ^-^

Christophe

Share this post


Link to post
Share on other sites

I’m not familiar with Sublime Text, but this seems to be a problem of both your phone and Sublime Text not honoring Unicode guidelines (check this out), albeit in different ways. Sublime Text doesn’t show you the problematic character at all and your mobile browser shows a missing glyph symbol. Try viewing your code sample from the first post on your phone. You’ll see the same rectangle right behind the closing PHP tag ?>.

Sublime Text should have a view mode that shows invisible white space characters (like tabs, spaces, and your 2028 separator). If you turn that on, you should be able to delete it easily :)

You have run into the same issue as this guy. That is to say, it’s not ProcessWire inserting the symbol ;)

  • Like 1

Share this post


Link to post
Share on other sites

Or if you use a Mac use TextWrangler or BBEdit to get rid of those gremlins with the “Zap Gremlins” function.

datamergeproblem2.png

  • Like 1

Share this post


Link to post
Share on other sites

Hi, I don't know how to solve this, but when viewing the source on my Android using the "VT View Source" application, it appears as if the extra character is actually after the </ul>, not before. Maybe this helps solving the problem?

Share this post


Link to post
Share on other sites

You could also try to copy the contents of the effected file, paste it in a textarea, then trow away the affected file, create one with the same name, select and copy the pasted text from the textarea and paste it back to the newly created file, press save.

Share this post


Link to post
Share on other sites

Hi guys,

Thanks for the fast answers.

I working on Mac and also have TextWranglers (good tip!)

Maybe a tip for some people: type in the url field (Mobile Chrome) before the url 'view-source:'

Ex: view-source:http://www.mysite.com

I see it now on my Nexus5.

post-3100-0-03993200-1425657122_thumb.pn

But why not a square-symbol when adding a ul-list manually?  ???

Grtz,

Christophe

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 flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By modifiedcontent
      I have one central website, with membership registration and content etc., and then several related websites with their own URL/domains, each on Processwire, all on the same server.
      I would like to access the database of the central website from the sister websites. How would I do that?
      You can't bootstrap one PW installation into another. You can include template parts from one in the other by just using the server path, but whatever you try to get/post just comes/goes to the database of the site you are on.
      Could you switch databases by including the config.php from another PW installation somewhere?
      What is the correct, secure way to do this?
    • By androbey
      Hello again! 

      Unfortunately I came across another problem. 

      I have a "regular" ProcessWire setup and want to create a separate php script. That script should be executed by a cron job and is bootstrapped with my PW setup. Main goal is to send mails which are stored in a email field. 
      My problem: I want to access a specific field from a template where only specific users have access to. Right now, the cron job is executed as "guest", of course. 

      How can I bypass this restriction, so that I have access to that specific field (it's only one email field)? 

      Does it make sense to set current user via api? 

      Hope you can help me out there.

      Cheers,
      Andreas
    • By SwimToWin
      I am using ProcessWire as the back-end to manage contents on multiple sites (I call them "sub-domains"). I use ProcessWire as an editing system and database only. The ProcessWire templating system is not in use. I want to use ProcessWire's API and in particular the Include & Bootstrap method to output contents -- pretty much in the same way you do, if contents is stored in a MySQL database and output in PHP files that use PDO to load data.
      The issue is that I cannot get ProcessWire to fully work on each of the "sub-domains".
      https://processwire.com/api/include/ says:
       
      > You can do anything with ProcessWire's API that you can do from a template,
      > so all of this still applies, as does everything in the developer API.
      How can I get access to variables such as $input when using Include & Bootstrap?
      I tried these:
      $wire->pages->get("/foo/bar/"); echo "Segment1: " . $wire->input->urlSegment1; # Returns null $wire->pages->get("/foo/bar/"); echo "Segment1: " . $wire->input()->urlSegment1; # Internal Server Error $p = $wire->pages->get("/foo/bar/"); echo "Segment1: " . $p->input->urlSegment1; # Returns null $p = $wire->pages->get("/foo/bar/"); echo "Segment1: " . $p->input()->urlSegment1; # Returns null @ryan Can the API Variables documentation be updated with a section / an example that explain how to use "Include & Bootstrap" for each variable (since this is a really strong feature in ProcessWire)?
      $page $pages - Example: $homepage = $wire->pages->get("/"); $input $sanitizer $session $fields $user $log $templates $config
×
×
  • Create New...