HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


v-7.0.1 Quiz - styling glitches

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#69964 (In Topic #14820)
Avatar

Community saint

In standard and mobile preview, the first answer is on the same line as the question.
(BTW awesome mobile preview graphic used here as example)


Not sure if Number spacing is directly related to previous styling, but on final quiz, the numbers are floating on the questions

Back to the top
 
Posted
Rating:
#69966
Avatar

Adding this to quizzes.css will fix the main problem:

Code

#survey th span {
   position: relative;
   z-index: 10;
}

The preview will be tidied up in the next release.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#69971
Avatar

Community saint

Thanks, but I did not see any change to the Quiz display after applying the fix.

 For info: My 
#body_inner is a standard fixed-
width 
980 px with standard side panels.
Back to the top
 
Posted
Rating:
#69976
Avatar

I wasn't clear, the fix should stop the numbers overlaying on top of the question text.
But actually this might be needed to:

Code

#survey th:before {
...
   z-index: 5;
...
}


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#69978
Avatar

Community saint

Thanks Chris!

Yes, I understood that was about the overlaying number

But, It still does not do anything.

I added this margin-top to push the number down three lines to account for long questions.

It's probably not efficient, but for now it fixes the display which was not legible enough and leading to excuses from participants failing the test.  Please don't loose your Sunday time on this problem, it can definitely wait. I was just putting these glitches up because of my limited time during the week. There is no urgency.

Code

#survey th:before {

   z-index: 5;
   margin-top: 30px;

}


PS: Firefox 4 added another hurdle preventing on-the-fly editing with their stubborn cache. A cache clearing button is a must-have.
Back to the top
 
Posted
Rating:
#70001
Avatar

For reference, here's the file (made it into 7.1 already actually) with the fix, working for me on Chrome and Firefox. I may not have explained it clearly/fully.

Attachment
» Download: quizzes.css (2 Kb, 85 downloads so far)


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#70108
Avatar

Community saint

Sorry for the delay coming back to this issue; needed time to test.

Your explanation and code were very clear the first time, thank you.

To be sure, I've used your quizzes.css in a 7.0.1 test site and uploaded to /themes/default/css/

Here's the result:


Hence, my adding:

Code

#survey th:before {
-----
   margin-top: 30px;
-----
}

 for this result:

I can live with that, but sometimes the questions might be even longer and the margin-top requiring adjustments.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: