HTML block has <li> bug in code

ChancyRat

In New SM HTML block, standard code for a list is causing the last item to lose list formating.

So this code:

<ul>
  <li>Someone hands you a closed box with a small opening, and says it contains rocks. You're asked to 
reach in and grab a rock and bring it out as fast as possible. You reach in quickly and GRAB - and - STOP - your hands 
sense you are touching eggs, not rocks. You ease up immediately and 
because your brain automatically recognizes 
how to handle eggs.  </li>
  <li>You bite down hard on a peach and meet the pit sooner than you expect. You're able to stop
  in time and avoid a tooth chip.  </li>
  <li> As you eat a cherry with the pit, you automatically chew around the pit. You don't think
about it, exactly, you just know how to move it to the side without thinking.  
Of course, when you first practice this, you might be clumsy and bite the pit, but the more eat cherries, 
the easier it gets to avoid the pits.  </li>
  </ul>

produced this:



I figured out a workaround which was to add code for another item.
So this:

<li> As you eat a cherry with the pit, you automatically chew around the pit. You don't think
about it, exactly, you just know how to move it to the side without thinking.  
Of course, when you first practice this, you might be clumsy and bite the pit, but the more eat cherries, 
the easier it gets to avoid the pits.  </li>
[COLOR=Red]<li></li>[/COLOR]
  </ul>

got me this:



EDIT: I have multiple lists on this (unveiled page), and the error occurred in every list; last item lost bulleting.

Allen

ChancyRat wrote: »

...

I see none of that on my test page. The last list item came out fine.
Screen shot here.
http://www.dgrin.com/showpost.php?p=1921560&postcount=24

ChancyRat

Well, shoot. Did multiple checks of the html to insure all opening and closing codes were there. Copied the code to W3Schools to test it.

In fact the code you have, that's in the image you linked to, IS missing some tags. There were some bullets missing 1/2 the code. I added them all back in.

Maybe when I unveil I'll come back and visit this.

Thanks,

ChancyRat

Can Legacy HTML/CSS, infiltrate/affect, new SM?
I currently have some formatting problems with HTML.
A friend who is a super coder, verified the HTML and CSS.
Allen, the CSS is your CSS.
The HTML is basically the same as you worked with here.
It's not adding the last bullet in a list.
I can "fix"/add them by adding a blank , but there are other problems too.

I had similar problems in Legacy HTML and CSS.

Is it possible that the legacy code is affecting the new code? What I mean is, could bad code from legacy, be affecting code in New?

thenickdude

No, nothing from legacy has been brought over to New SmugMug. What CSS/HTML are you trying to use precisely?

ChancyRat

Lamah wrote: »

No, nothing from legacy has been brought over to New SmugMug. What CSS/HTML are you trying to use precisely?

Thank you, Lamah. If you want the HTML, I think I would have to email it to you in .txt, as it's long. The CSS is this:

ul {
  margin-left: 20px;
}

li {
  list-style: inside;
  margin-left: 0;
  margin-right: 10%;
  margin-top: .5em;
  margin-bottom: .5em;
  text-indent: 1em;
}

a {
  color: #0B369A;
  text-decoration: underline;
}

a:hover {
  color: #4B79F9 !important;
}

p {
  margin-top: .5em;
  margin-bottom: .5em;
  line-height: 20px;
}

ChancyRat

I will mention that I have more than one gallery with a table in it now, and I'm using the same CSS with them, and they too lose the last bullet.

thenickdude

ChancyRat wrote: »

I will mention that I have more than one gallery with a table in it now, and I'm using the same CSS with them, and they too lose the last bullet.

Can you come up with a short example which demonstrates the problem? e.g. slim down the text inside each bullet to one sentence and double check that it still reproduces the problem.

ChancyRat

I had the exact same thought.
Okay, here's an image
I took the HTML from the problem gallery, made a new test gallery, put in all the CSS, and all the html, and then systematically removed parts: <p>, and sets of <uL>, as there were several. Also an embedded image, and an <h3>. Each removal showed me the lost last bullet.
Until in the end I have only one bulleted list, and it has the lost last bullet.

Here is the HTML:

<div style="font-size: 20px;">
  <ul>
  <li> Capturing prey (insects, worms, <a href="/Enrichment/Feathers/7795645_BNGPt#515141009_6Z2n7-A-LB"><i>THE 
ALL-IMPORTANT PESKY FEATHERS </i></a>, etc.).</li> 
  <li> Maybe <a href="/EarningTrust/cagework/9130839_2QRsg#608738894_VoXfW-A-LB">"Nom-Nom-Noming"</a> 
needs to be mentioned twice? :) </li> 
  <li> <a href="/Introductions/ratbehaviors/10963305_YcSxt#935930422_HCR7M-A-LB">Defending from predators</a>.</li> 
  <li> <a href="/Introductions/NormalAgonisticBehavior/13539781_P5MYa">Normal agonistic behaviors with mischief-mates</a>.  </li>
  <li> Defensive (aggressive) biting, such as <a href="/Introductions/ratbehaviors/10963305_YcSxt#935930422_HCR7M-A-LB">defending 
one's territory from a new rat</a>, or 
<a href="/BitingRats/interacting/10158796_a5NMF">biting a new human's hand after having 
been physically abused by other humans in the past</a>.  </li>
  <li> <a href="/Friends/Gwen/RatRoom/10568204_KneKf#620787830_abi4P-A-LB">Escaping from everything no matter
how much effort the human puts into making it escape-proof</a>.  </li> 
  <li> <a href="Enrichment/TheAimofEnrichment/13529606_pzCMj4">Gnawing the universe down into its molecular parts, one of
  the primary jobs of rats</a>.</li> 
  </ul>
</div>

ul {
  margin-left: 20px;
}

li {
  list-style: inside;
  margin-left: 0;
  margin-right: 10%;
  margin-top: .5em;
  margin-bottom: .5em;
  text-indent: 1em;
}

a {
  color: #0B369A;
  text-decoration: underline;
}

a:hover {
  color: #4B79F9 !important;
}

p {
  margin-top: .0em;
  margin-bottom: .5em;
}

ChancyRat

If one of the other galleries with a new HTML block, had an error in the html, would it affect this block?
I know you said the legacy code could not affect this, but what about the gallery descriptions? My old gallery descriptions have HTML that may have an error.

ChancyRat

Just to be thorough, here's what my friend said. She was viewing another page (source) with a table that had a list, same dropping the last bullet. On that page I had more than one HTML block. I told her the code she singled out, must be SM's 'return to the default page format' code between the two HTML blocks.

Even though I told her I didn't think she was understanding how content blocks work, she has an odd comment about the code and the bullets, which is why I'm posting it here.

Now, before the table that looks okay to me there's a bunch of code that doesn't look like it's helping matters:

<div class="sm-page-layout-row yui3-g" data-layout-row="w">
<div class="sm-page-layout-column yui3-u" style="width: 100%;" data-layout-column="0">
<div id="sm-page-widget-TwRkrrWf" class="sm-page-widget sm-page-widget-html sm-page-widget-3344593" data-typeid="3344593">
<div class="sm-page-widget-content">
<div class="sm-page-widget-header">
</div>
<div id="sm-page-widget-VbrL3BgB" class="sm-page-widget-body">

Since it's between your menu and right above the "Quality of Life Scale (The HHHHHMM Scale)" table and contains a bunch of "sm-" ids, it could be what shouldn't be there. When I removed it to test that section, the bullets started working properly. We may need to add some padding back into the table, but try this and see if it works better for you?

thenickdude

ChancyRat wrote: »

If one of the other galleries with a new HTML block, had an error in the html, would it affect this block?

In theory, no, because one of the main goals of SmugMug's HTML validation is to prevent broken HTML from affecting the rest of the page. In practice, yes, it's possible for HTML blocks on the same page to break an HTML block.

If I add that HTML / CSS you've got to a page that doesn't have anything else on it, it displays the final bullet fine. You've probably got some CSS that explicitly removes the bullet from the final <li> of a list. Try searching your CSS blocks/theme CSS for ":last-of-type" or ":last-child" and paste the blocks you find here.

ChancyRat

Lamah wrote: »

In theory, no, because one of the main goals of SmugMug's HTML validation is to prevent broken HTML from affecting the rest of the page. In practice, yes, that's possible.

If I add that HTML / CSS you've got to a page that doesn't have anything else on it, it displays the final bullet fine. You've probably got some CSS elsewhere that explicitly removes the bullet from the final <li> of a list. Try searching your CSS blocks/theme CSS for ":last-of-type" or ":last-child" and paste the blocks you find here.

How do I search through all CSS blocks on the site?
They are in individual HTML blocks, all galleries, site-wide, etc.

thenickdude

Only the CSS blocks that you can see in the customiser on the page you're looking at need to be considered, plus your theme's CSS. Nothing else has any effect on that particular page.

ChancyRat

The HTML CSS I already gave you above.

The Theme CSS doesn't have "last" anything.
The only other CSS (right?) would be All Galleries CSS, and here I have this total code:

/* Hide the 2nd breadcrumb bar completely */
.sm-page-layout-region .sm-page-layout-region-center .sm-page-layout-row:nth-of-type(1) .sm-breadcrumb-item {
display:none !important;
}

/* Turn back on the current gallery name */
.sm-page-layout-region-center .sm-page-layout-row:nth-of-type(1) .sm-page-widget-body li:last-child {
display: inline !important;
}

ChancyRat

Lamah wrote: »

In theory, no, because one of the main goals of SmugMug's HTML validation is to prevent broken HTML from affecting the rest of the page. In practice, yes, it's possible for HTML blocks on the same page to break an HTML block.

If I add that HTML / CSS you've got to a page that doesn't have anything else on it, it displays the final bullet fine. You've probably got some CSS that explicitly removes the bullet from the final <li> of a list. Try searching your CSS blocks/theme CSS for ":last-of-type" or ":last-child" and paste the blocks you find here.

And I do deeply appreciate your looking at this issue.
You quoted one of my thoughts, about other new HTML blocks and whether they might have errors.
Regarding the gallery descriptions - they aren't exactly isolated to legacy, correct? They do appear in New mode and we can edit them. My legacy descriptions are ripe for HTML error. I'm curious why not target this as the answer?

ChancyRat

I just realized you might have thought I had more than one HTML block on the test page, and I do not.

thenickdude

HTML and CSS blocks on other pages can't cause issues on this page, they're independent. Your problem is being caused by this CSS you posted:

/* Turn back on the current gallery name */
.sm-page-layout-region-center .sm-page-layout-row:nth-of-type(1) .sm-page-widget-body li:last-child {
display: inline !important;
}

It's a little bit too general, so it matches the last element of a list inside any kind of widget in a particular position on the page. What situation is it supposed to be working in?

ChancyRat

On all folders and galleries, I wanted to turn off all of the breadcrumb except the gallery (or Folder) title.
I have two breadcrumbs, one at the very top that will show the full breadcrumb, and then the title of whatever folder or gallery one is in.

FWIW, this code is not working for that purpose in some circumstances, either in some folders or elsewhere. I've noted it as I worked and thought I would need to come back to that.

Is there a way to set the folder or gallery title to show in the folder or gallery, without using a breadcrumb?

I'm so glad you found this because I've been working on another list and going crazy.

pbandj

Instead of your second breadcrumb, where you're trying to turn off everything but the gallery or folder name, you could probably remove that breadcrumb and replace it with a "title" content element. Have you tried that to see if that will work for what you're trying to do?

ChancyRat

pbandj wrote: »

Instead of your second breadcrumb, where you're trying to turn off everything but the gallery or folder name, you could probably remove that breadcrumb and replace it with a "title" content element. Have you tried that to see if that will work for what you're trying to do?

Thank you for the suggestion - I dove in to try - but it doesn't work. I tried several times. Added a Title block to All folders. When you click All Folders, you are taken to the last folder you worked on (even if you log in starting on the homepage). Dragged in the block, and was delighted to see the title of the folder pop into place. Published. Roamed through the various folders, and they all have the name of that first folder. Same thing happened in all Galleries.

On a good note, I lost it with the missing bullets and deleted the breadcrumb troublemaker. Now my bullets are baa-aack.

But now my folders and galleries have no automatic population of their titles. I so hope there is a solution to this one.

pbandj

ChancyRat wrote: »

Thank you for the suggestion - I dove in to try - but it doesn't work. I tried several times. Added a Title block to All folders. When you click All Folders, you are taken to the last folder you worked on (even if you log in starting on the homepage). Dragged in the block, and was delighted to see the title of the folder pop into place. Published. Roamed through the various folders, and they all have the name of that first folder. Same thing happened in all Galleries.

On a good note, I lost it with the missing bullets and deleted the breadcrumb troublemaker. Now my bullets are baa-aack.

But now my folders and galleries have no automatic population of their titles. I so hope there is a solution to this one.

Odd. I played with this, and got it to work for me, but also got it to break the way you did...I'm not positive what the pattern is...but I'll take a stab...

What I did when it worked, was that I went to my top level (Mine is a "browse" page) and hit Customize. Then, as you said, on the "All Folders" page I added the "Title" content block. If I DO NOT open it to change its settings, it seems to work correctly, and as I browse through folders, I get the title of the folder. If, However, I open the content block as if to modify its settings, it seems to save the text that's in there in the text box and then that same text appears on all folders. I tried blanking out the text, and that seemed to work (now it picks up the title appropriately.) So that interface is a little flaky, but I can get it to work with the right combination of magic.

ChancyRat

pbandj wrote: »

Odd. I played with this, and got it to work for me, but also got it to break the way you did...I'm not positive what the pattern is...but I'll take a stab...

What I did when it worked, was that I went to my top level (Mine is a "browse" page) and hit Customize. Then, as you said, on the "All Folders" page I added the "Title" content block. If I DO NOT open it to change its settings, it seems to work correctly, and as I browse through folders, I get the title of the folder. If, However, I open the content block as if to modify its settings, it seems to save the text that's in there in the text box and then that same text appears on all folders. I tried blanking out the text, and that seemed to work (now it picks up the title appropriately.) So that interface is a little flaky, but I can get it to work with the right combination of magic.

How neat that you can work magic. Unfortunately, I need to set the font size to S. The default is M. I think that means I have to change the setting? Do you think this should be reported as a bug? Are you unveiled? I wonder what happens to the site Live, for this situation. It doesn't make sense at all, does it.

pbandj

ChancyRat wrote: »

How neat that you can work magic. Unfortunately, I need to set the font size to S. The default is M. I think that means I have to change the setting? Do you think this should be reported as a bug? Are you unveiled? I wonder what happens to the site Live, for this situation. It doesn't make sense at all, does it.

The site I'm testing on is unveiled (live)...it's just a test account I set up to play with Smugmug so I could play somewhere other than my main (still unveiled) site.

Have you tried: 1) adding the title block, 2) changing the setting you need (change font size to S) and then 3) blank out the title text? That's only magic I can think of you might try...

EDIT: I forgot to answer your other question, but yes, it seems like a bug that when you edit the title settings it pulls the title of the last page you were on. Blanking it back out "seemed" to work for me, but I didn't actually publish the change...I just previewed and scrolled around...then discarded my changes. But it seems like Smugmug should make that work a little better; maybe have an option where you can either enter a hard-coded title you want to appear on all folders/galleries, OR have it pull from the current location, but the way that UI is designed it is definitely not obvious what to do, if you can get it to work at all.

ChancyRat

pbandj wrote: »

The site I'm testing on is unveiled (live)...it's just a test account I set up to play with Smugmug so I could play somewhere other than my main (still unveiled) site.

Have you tried: 1) adding the title block, 2) changing the setting you need (change font size to S) and then 3) blank out the title text? That's only magic I can think of you might try...

EDIT: I forgot to answer your other question, but yes, it seems like a bug that when you edit the title settings it pulls the title of the last page you were on. Blanking it back out "seemed" to work for me, but I didn't actually publish the change...I just previewed and scrolled around...then discarded my changes. But it seems like Smugmug should make that work a little better; maybe have an option where you can either enter a hard-coded title you want to appear on all folders/galleries, OR have it pull from the current location, but the way that UI is designed it is definitely not obvious what to do, if you can get it to work at all.

SM needs to give you a GOLD WAND - right now!
It worked.
Except I think I did something wrong with the galleries. I did it, but then the titles didn't show in galleries when i looked through them. I'm very confused about what I did and I now can't locate the gallery I was in when I did it. But the 2nd time I did seem properly in All Galleries. It populated a name of a gallery even though I wasn't in that gallery at the time. I backed out the name and -
thank you SO much!