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

    • 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

            support-lep@liferay.com SE Support
            mod David Kubitza (Inactive)
            Kiyoshi Lee Kiyoshi Lee
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              9 years, 40 weeks, 1 day ago

              Packages

                Version Package
                6.1.1 CE GA2
                6.1.20 EE GA2