1. 

   Slightly Perturbed
   

   offline

   Member

   I thought that when javascript was disabled that Show/More or less wouldn't toggle since that requires Javascript but at least the hidden text would become visible. This doesn't appear to be the case. How can I make it so it is? Do I need to use a Noscript rule and if so on what? Thanks.

   Posted 11 months ago
2. 

   Slightly Perturbed
   

   offline

   Member

   Bump! I still want to know how to show the content of Show More or Less when Javascript is disabled. I also want to know how to centre the show more or less trigger within a parent div and have the text block that is revealed aligned-left. How to do that, thanks.

   Posted 11 months ago
3. 

   Al Sparber
   

   offline

   PVII Team

   We don't have a noscript rule for SML. We can easily add one on the next update if that would be helpful. It might help to consider that until we do this not a serious issue. It is fully accessible at all times for assistive readers. The number of sighted people running devices with script disabled is statistically irrelevant. That said, we will put a noscript rule in our schedule for the next update.

   Centering? Set the trigger element to text-align center.

   Posted 11 months ago
4. 

   Slightly Perturbed
   

   offline

   Member

   Thanks, for your reply, a noscript rule for SML would be great. Regarding Centering I see didn't explain fully. I have a div and inside that div I want the trigger to be centered horizontally but I want the actual text that is displayed when triggered to be aligned left but centered within the parent div. I guess I need an inline-block or margin auto but I can't figure it out.

   Posted 11 months ago
5. 

   Sinclair
   

   offline

   Member

   You could try this, set your sml to indented and put this at the bottom of the sml stylesheet.....

   /*center the trigger*/
   a.sml-more {
   display: block !important;
   text-align:center !important;
   border:none !important;
   }

   /*center the sml div */
   .sml-content.indented {
   width: 75%; /*new value - change to suit*/
   border-right: 1px dotted; /*added - optional*/
   padding-right: 1em; /*added - optional*/
   }
   @media only screen and (min-width: 0px) and (max-width: 700px) {
   .sml-content.indented {
   width: auto;
   border:none;
   padding: 0;
   }
   }

   HTH

   Posted 10 months ago

RSS feed for this topic

Reply

You must log in to post.