--- title: Panel order: 6 layout: page --- [[layout.panel]] = Panel ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/panel"] endif::web[] [classname]#Panel# is a single-component container with a frame around the content. It has an optional caption and an icon which are handled by the panel itself, not its containing layout. The panel itself does not manage the caption of its contained component. You need to set the content with [methodname]#setContent()#. [classname]#Panel# has 100% width and undefined height by default. This corresponds with the default sizing of [classname]#VerticalLayout#, which is perhaps most commonly used as the content of a [classname]#Panel#. If the width or height of a panel is undefined, the content must have a corresponding undefined or fixed size in the same direction to avoid a sizing paradox. [source, java] ---- Panel panel = new Panel("Astronomer Panel"); panel.addStyleName("mypanelexample"); panel.setSizeUndefined(); // Shrink to fit content layout.addComponent(panel); // Create the content FormLayout content = new FormLayout(); content.addStyleName("mypanelcontent"); content.addComponent(new TextField("Participant")); content.addComponent(new TextField("Organization")); content.setSizeUndefined(); // Shrink to fit content.setMargin(true); panel.setContent(content); ---- The resulting layout is shown in <>. [[figure.layout.panel]] .A [classname]#Panel# image::img/panel.png[width=50%, scaledwidth=70%] [[layout.panel.scrolling]] == Scrolling the Panel Content ((("scroll bars", id="term.layout.panel.scrolling.scrollbars", range="startofrange"))) Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. Scroll bars in a [classname]#Panel# are handled natively by the browser with the [literal]#++overflow: auto++# property in CSS. (((overflow CSS property))) In the following example, we have a 300 pixels wide and very high [classname]#Image# component as the panel content. [source, java] ---- // Display an image stored in theme Image image = new Image(null, new ThemeResource("img/Ripley_Scroll-300px.jpg")); // To enable scrollbars, the size of the panel content // must not be relative to the panel size image.setSizeUndefined(); // Actually the default // The panel will give it scrollbars. Panel panel = new Panel("Scroll"); panel.setWidth("300px"); panel.setHeight("300px"); panel.setContent(image); layout.addComponent(panel); ---- The result is shown in <>. Notice that also the horizontal scrollbar has appeared even though the panel has the same width as the content (300 pixels) - the 300px width for the panel includes the panel border and vertical scrollbar. [[figure.layout.panel.scrolling]] .Panel with Scroll Bars image::img/panel-scrolling.png[width=50%, scaledwidth=70%] ((("[interfacename]#Scrollable#", id="term.layout.panel.scrolling.scrollable", range="startofrange"))) [[layout.panel.scrolling.programmatic]] === Programmatic Scrolling [classname]#Panel# implements the [interfacename]#Scrollable# interface to allow programmatic scrolling. You can set the scroll position in pixels with [methodname]#setScrollTop()# and [methodname]#setScrollLeft()#. You can also get the scroll position set previously, but scrolling the panel in the browser does not update the scroll position to the server-side. (((range="endofrange", startref="term.layout.panel.scrolling.scrollable"))) (((range="endofrange", startref="term.layout.panel.scrolling.scrollbars"))) [[layout.panel.css]] == CSS Style Rules [source, css] ---- .v-panel {} .v-panel-caption {} .v-panel-nocaption {} .v-panel-content {} .v-panel-deco {} ---- The entire panel has [literal]#++v-panel++# style. A panel consists of three parts: the caption, content, and bottom decorations (shadow). These can be styled with [literal]#++v-panel-caption++#, [literal]#++v-panel-content++#, and [literal]#++v-panel-deco++#, respectively. If the panel has no caption, the caption element will have the style [literal]#++v-panel-nocaption++#. The built-in [literal]#++borderless++# style in the Valo theme has no borders or border decorations for the [classname]#Panel#. You can use the [parameter]#ValoTheme.PANEL_BORDERLESS# constant to add the style to a panel.option value='fop-2_8'>fop-2_8 Apache XML Graphics FOP: https://github.com/apache/xmlgraphics-fopwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/test/layoutengine/standard-testcases/footnote_bug37880.xml
blob: 2395ad8d208cdaba78fccf03da2b1672eb31e6af (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- $Id$ -->
<testcase>
  <info>
    <p>
      This test checks footnotes, particularly bug #37880. A footnote in centered text was ignored.
    </p>
  </info>
  <fo>
    <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:svg="http://www.w3.org/2000/svg">
      <fo:layout-master-set>
        <fo:simple-page-master master-name="normal" page-width="5in" page-height="3in">
          <fo:region-body/>
        </fo:simple-page-master>
      </fo:layout-master-set>
      <fo:page-sequence master-reference="normal" white-space-collapse="true">
        <fo:flow flow-name="xsl-region-body">
          <fo:block text-align="center">
            Blah
            <fo:footnote id="fn1">
              <fo:inline font-size="6.95pt" vertical-align="super">1) </fo:inline>
              <fo:footnote-body>
                <fo:block text-align="left">
                  <fo:inline font-size="6.95pt" vertical-align="super">1) </fo:inline>http://xmlgrapics.apache.org/fop/</fo:block>
              </fo:footnote-body>
            </fo:footnote>
          </fo:block>
          <!-- This second block uses an empty inline which will produce an auxiliary box w=0. I wanted to check if maybe this
               box would be ignored as anchor due to the additional check on auxiliary boxes that was necessary to fix the 
               above bug. -->
          <fo:block text-align="center">
            Blah2
            <fo:footnote id="fn2">
              <fo:inline/>
              <fo:footnote-body>
                <fo:block text-align="left">
                  <fo:inline font-size="6.95pt" vertical-align="super">2) </fo:inline>http://www.apache.org</fo:block>
              </fo:footnote-body>
            </fo:footnote>
          </fo:block>
        </fo:flow>
      </fo:page-sequence>
    </fo:root>
  </fo>
  <checks>
    <true xpath="//footnote/block[1]/@bpd &gt; 0"/>
    <true xpath="//footnote/block[2]/@bpd &gt; 0"/>
  </checks>
</testcase>