Some Toolbar tabs cannot be clicked after banner-text shift

Justin Kraemer

09 Februari 2018 17:00

I noticed yesterday in a viewer the I want to... button isnot clickable, except at its very bottom edge. Today I got a phone call from a user reporting he cannot activate the Tools tab on the toolbar, which is the rightmost one.

 

In trying it, I found only the two leftmost tabs can be activated by mouse click anywhere on them, and the third one only by clicking on its left edge. The fourth one cannot be clicked at all. The only way to activate it is to hit the Tab button on the keyboard until it is highlighted, and then <Enter>

 

I have discovered the cause. Earlier this week I shifted the banner text to allow the logo to sit to its left. I do not understand how that could impact the toolbar, though. What I did was in wwwroot\GVH\Resources\Styles\Desktop.css I added this:

 

  .banner-text { font-size: 1.0em; left: 135px; height: 10em; margin-top: -5em; top: 50%; }

 

By deleting this again, the problem goes away. Can someone please tell me how to prevent this troublesome side effect of shifting the banner text? I still need it shifted.

 

Thanks,

Justin

0

• 

  Permanently deleted user

  09 Februari 2018 18:31

  perhaps you can try playing around with the z-index value in your CSS style?  See what it's set to currently (if it's set at all) and try lowering the value from there.

  0
• 

  Justin Kraemer

  09 Februari 2018 20:51

  Thanks Peter. Under .banner-subtitle, I have z-index: 500; 

   

  under .banner-text there is no z-index. Does one belong there, or is it the banner-subtitle z-index: 500 I ought to try lowering?

  0
• 

  Permanently deleted user

  09 Februari 2018 21:28

  Justin,

   

  after looking at your css a bit closer in firebug, it is your 'height' property that is causing the problem.  I don't think changing the z-index will fix the problem in this case.

   

  Can you try reducing your height to 5 or 6em and increase your 'top' property to something like 75% and see if that works better for you?  Reducing the height will shift the text up but increasing the top will push it back down again without increasing the total height of the element.

   

  Peter.

  0
• 

  Dan Giersz

  09 Februari 2018 23:27

  Peter is right.  You probably meant to put "1.0" for the height.  An em of 10 is ten times the size of the font, which is a lot.

  0
• 

  Justin Kraemer

  14 Februari 2018 13:56

  Thanks Peter and Dan. I have made some adjustments you suggested, and as you can see here: .banner-text { font-size: 1.0em; left: 135px; height: 1.0em; margin-top: -1em; top: 50%; } and the result is my problems are resolved. The original values simply came from a copy from another forum post. 

   

  Thanks again,

   

  Justin

   

   

  0

Du måste logga in om du vill lämna en kommentar.