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

            Assignee:
            support-lep@liferay.com SE Support
            Reporter:
            mod David Kubitza
            Participants of an Issue:
            Recent user:
            Marta Elicegui
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Days since last comment:
              8 years, 31 weeks ago

                Packages

                Version Package
                6.1.1 CE GA2
                6.1.20 EE GA2