Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-32903

Navigation hides behind IFrame in Internet Explorer

    Details

    • Liferay Contributor's Agreement:
      Accept

      Description

      When adding an IFrame to a page and for example showing a PDF in it, the top navigation will hide behind the PDF in Internet Explorer, no matter what z-index one sets.

      This is a known IE issue and not really a Liferay bug, but we can have a workaround here so it will work (almost) fine in Liferay.

      By adding some empty IFrames under the child menu items it will be usable again. This is my current navigation.vm:

      <nav class="$nav_css_class" id="navigation">
      	<h1>
      		<span>#language("navigation")</span>
      	</h1>
      
      	<ul>
      		#foreach ($nav_item in $nav_items)
      			#if ($nav_item.isSelected())
      				<li class="selected">
      			#else
      				<li>
      			#end
      				<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
      				<!--[if IE 7]>
      					#set ($size = $nav_item.getChildren().size() * 25)
      				<![endif]-->
      				<!--[if IE 9]>
      					#set ($size = $nav_item.getChildren().size() * 24)
      				<![endif]-->
      				#if ($nav_item.hasChildren())
      					<ul class="child-menu">
      						<!--[if IE 7]>
      							<iframe src="about:blank" style="height: ${size}px; filter: alpha(opacity=50);"></iframe>
      						<![endif]-->
      						<!--[if IE 9]>
      							<iframe src="about:blank" style="height: ${size}px; filter: alpha(opacity=50);"></iframe>
      						<![endif]-->
      						#foreach ($nav_child in $nav_item.getChildren())
      							<!--[if IE 8]>
      								<iframe src="about:blank"></iframe>
      							<![endif]-->
      							#if ($nav_child.isSelected())
      								<li class="selected">
      							#else
      								<li>
      							#end
      								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
      							</li>
      						#end
      					</ul>
      				#end
      			</li>
      		#end
      	</ul>
      </nav>
      

      Furthermore some changes in custom.css:

      #navigation li.hover .child-menu {
      	background: #1E2529;
      	display: block;
      	position: absolute;
      	width: 200px;
      	z-index: 250;
      }
      #navigation .child-menu li {
      	border-width: 0 0 1px;
      	display: block;
      	float: none;
      	margin: 0;
      	background: #020509 no-repeat 5px 50%;
      }
      .ie7 #navigation .child-menu li a {
      	zoom: 1;
      	background: #020509 no-repeat 5px 50%;
      }
      
      #navigation iframe {
      	position: absolute;
      	left: 0px;
      	width: 280px;
      	height: 23px;
      }
      
      .ie7 #navigation iframe {
      	height: 25px;
      	filter: alpha(opacity=50);
      }
      

      I'm not sure if we need all these conditions but this way it looks the best in my opinion.

      The attached screenshots are from an IE7.

        Attachments

        1. IFrame Bug.png
          IFrame Bug.png
          71 kB
        2. IFrame Bug 2.png
          IFrame Bug 2.png
          48 kB
        3. IFrame Fix.png
          IFrame Fix.png
          79 kB

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                6 years, 25 weeks, 4 days ago

                Packages

                Version Package
                6.1.1 CE GA2
                6.1.20 EE GA2