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

KB Article with a large table can extend past KB Display portlet borders

    Details

    • Type: Regression Bug
    • Status: Verified
    • Resolution: Unresolved
    • Affects Version/s: 6.2.X EE, 7.0.0 M4
    • Fix Version/s: None
    • Component/s: Knowledge Base
    • Labels:
    • Fix Priority:
      2

      Description

      The KB Display portlet can escape the portlet borders if displaying a table large enough. This is seen in when the KB Display portlet is placed on a page using the 30/70 configuration.

      Steps to reproduce:

      1. Deploy KB Display.
      2. Navigate to Admin > Content > Knowledge Base.
      3. Add KB Article.
      4. Click source.
      5. Enter HTML for a large enough table, example:
         
        <table>
        <tbody>
        		<tr>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 55.0833320617676px; background: white;">Division</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 130.41667175293px; background: white;">Team</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 86.4166641235352px; background: white;">City/Area</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 101.083335876465px; background: white;">Stadium</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 93.75px; background: white;">Coordinates</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 52.4166679382324px; background: white;">Founded</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 39.75px; background: white;">Joined</th>
        			<th style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; width: 34.4166679382324px; background: white;">Notes</th>
        		</tr>
        		<tr>
        			<th colspan="8" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; background: rgb(187, 0, 0);"><a href="http://en.wikipedia.org/wiki/American_League" style="color: rgb(11, 0, 128); background-image: none;" title="American League"><span style="color: white;">American League</span></a></th>
        		</tr>
        		<tr>
        			<th rowspan="5" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center; background: white;"><a href="http://en.wikipedia.org/wiki/American_League_East" style="color: rgb(11, 0, 128); background-image: none;" title="American League East">East</a></th>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><b><a href="http://en.wikipedia.org/wiki/Baltimore_Orioles" style="color: rgb(11, 0, 128); background-image: none;" title="Baltimore Orioles">Baltimore Orioles</a></b><sup class="reference" id="cite_ref-19" style="line-height: 1; unicode-bidi: -webkit-isolate; font-size: 10px;"><a href="http://en.wikipedia.org/wiki/Major_League_Baseball#cite_note-19" style="color: rgb(11, 0, 128); white-space: nowrap; background-image: none;">[note 1]</a></sup></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><a href="http://en.wikipedia.org/wiki/Baltimore" style="color: rgb(11, 0, 128); background-image: none;" title="Baltimore">Baltimore</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Maryland" style="color: rgb(11, 0, 128); background-image: none;" title="Maryland">MD</a></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><a href="http://en.wikipedia.org/wiki/Oriole_Park_at_Camden_Yards" style="color: rgb(11, 0, 128); background-image: none;" title="Oriole Park at Camden Yards">Oriole Park at Camden Yards</a></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><span class="plainlinks nourlexpansion"><span style="white-space: nowrap;"><img alt="" class="wmamapbutton noprint" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/WMA_button2b.png/17px-WMA_button2b.png" style="border-style: none; padding: 0px 3px 0px 0px; cursor: pointer;" title="Show location on an interactive map" /><a class="external text" href="http://tools.wmflabs.org/geohack/geohack.php?pagename=Major_League_Baseball&amp;params=39_17_2_N_76_37_18_W_type:landmark&amp;title=Baltimore+Orioles" style="color: rgb(102, 51, 102); white-space: normal; padding: 0px !important; background-image: none !important;"><span class="geo-default" style="display: inline;"><span class="geo-dms" style="display: inline;" title="Maps, aerial photos, and other data for this location"><span class="latitude" style="white-space: nowrap;">39°17′2″N</span><span class="longitude" style="white-space: nowrap;">76°37′18″W</span></span></span></a></span></span></td>
        			<td colspan="2" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center;">1901</td>
        			<td align="center" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><sup class="reference" id="cite_ref-20" style="line-height: 1; unicode-bidi: -webkit-isolate; font-size: 10px;"><a href="http://en.wikipedia.org/wiki/Major_League_Baseball#cite_note-20" style="color: rgb(11, 0, 128); white-space: nowrap; background-image: none;">[19]</a></sup></td>
        		</tr>
        		<tr>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><b><a href="http://en.wikipedia.org/wiki/Boston_Red_Sox" style="color: rgb(11, 0, 128); background-image: none;" title="Boston Red Sox">Boston Red Sox</a></b>&nbsp;<sup class="reference" id="cite_ref-21" style="line-height: 1; unicode-bidi: -webkit-isolate; font-size: 10px;"><a href="http://en.wikipedia.org/wiki/Major_League_Baseball#cite_note-21" style="color: rgb(11, 0, 128); white-space: nowrap; background-image: none;">[note 2]</a></sup></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><a href="http://en.wikipedia.org/wiki/Boston" style="color: rgb(11, 0, 128); background-image: none;" title="Boston">Boston</a>,&nbsp;<a href="http://en.wikipedia.org/wiki/Massachusetts" style="color: rgb(11, 0, 128); background-image: none;" title="Massachusetts">MA</a></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><a href="http://en.wikipedia.org/wiki/Fenway_Park" style="color: rgb(11, 0, 128); background-image: none;" title="Fenway Park">Fenway Park</a></td>
        			<td style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><span class="plainlinks nourlexpansion"><span style="white-space: nowrap;"><img alt="" class="wmamapbutton noprint" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/WMA_button2b.png/17px-WMA_button2b.png" style="border-style: none; padding: 0px 3px 0px 0px; cursor: pointer;" title="Show location on an interactive map" /><a class="external text" href="http://tools.wmflabs.org/geohack/geohack.php?pagename=Major_League_Baseball&amp;params=42_20_47_N_71_5_51_W_type:landmark&amp;title=Boston+Red+Sox" style="color: rgb(102, 51, 102); white-space: normal; padding: 0px !important; background-image: none !important;"><span class="geo-default" style="display: inline;"><span class="geo-dms" style="display: inline;" title="Maps, aerial photos, and other data for this location"><span class="latitude" style="white-space: nowrap;">42°20′47″N</span><span class="longitude" style="white-space: nowrap;">71°5′51″W</span></span></span></a></span></span></td>
        			<td colspan="2" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em; text-align: center;">1901</td>
        			<td align="center" style="border: 1px solid rgb(170, 170, 170); padding: 0.2em;"><sup class="reference" id="cite_ref-22" style="line-height: 1; unicode-bidi: -webkit-isolate; font-size: 10px;"><a href="http://en.wikipedia.org/wiki/Major_League_Baseball#cite_note-22" style="color: rgb(11, 0, 128); white-space: nowrap; background-image: none;">[20]</a></sup></td>
        		</tr>
        		</tbody>
        </table>
        
      6. Navigate to KB Display page.
      7. Assert the table continues past portlet borders.

        Attachments

        1. 52792.png
          52792.png
          65 kB
        2. 52792master.png
          52792master.png
          80 kB
        3. LPS-52792 - DXP.png
          LPS-52792 - DXP.png
          131 kB
        4. tables can break portlet boundaries.png
          tables can break portlet boundaries.png
          105 kB

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Days since last comment:
                2 years, 29 weeks, 6 days ago

                Packages

                Version Package