Dynamic sizing of a component to fit the content

Hi All,
How can I make my component so that it will be dynamically sized to fit the content height?  I would like to create a component that will have a variable height.  It has a serious of user input controls.  Depending on the answers given, more input from the user may be necessary--specifically, they will have to provide an explanation in a textbox.
So, my thinking is that I don't want to display the textbox unless they answer "yes" to any questions that require additional explanation.  If they do, then I want display the TextArea control along with instructions to enter an additional explanation here.
However, when I do that, it will cause my component's height to grow.  I don't want to reserve space for that textbox in the component's dimensions--I would prefer it simply grow (pushing anything below it further down) if and when the textbox appears.
How would I go about doing this?
  -Josh

I think the standard JSF solution would be not to do the create/delete of inputs on the client side, but to do it on the server side.
If that is not your cup of tea, I think that the standard components will not be sufficient. So you are looking at either not binding the inputs to a component and just getting the values via the request parameters or creating a custom component capable of dealing with this.

Similar Messages

  • Adobe's Pan|Zoom component not fitting the content area

    I'm calling centerView method on handleLoadComplete event (ImageViewer.as) so the image will be adjusted to fit the content area when load is complete, but I'm having problems when testing this on Internet Explorer. Using Firefox it works fine, but on IE it only works after pressing Ctrl + F5.
    Do you know how can I fix this?

    Hi.
    Making it zoom and pan was a bit tricky, but I had it done
    two months ago (in july). The integration of the pan zoom with
    callout ("kind of spots on the map", the other published FIG
    componet) repositioning was bit tricky.
    I solved it with pointTransformations, but it was too
    expansive, in terms of memory. In my first trial, theyre positions
    were recalcuted as you pan and zoom.
    Now, in the version I published here
    http://www.gabriela.trindade.nom.br/?p=61
    you dont hav smooth zooming, and the callouts only are
    repositioned after your drop the map.
    I am working now on it. Im probably going to make then blurry
    or transparent while panning, but as I got this message from the
    foruns and I had promissed another guy who contacted me a (working)
    version, I decided to publish it on my blog.
    Hope it will be usefull.
    Please, be aware that not really a small application: it has
    lots of classes. Please read it all before contacting me with any
    doubts.
    Best luck :0)

  • Spry Accordion menu - How do you make tabs without content and make panel height fit the content?

    I have an Accordion Menu on my site and I would like to put a tab at the top that links to my homepage when clicked, instead of sliding open to show a content panel. I don't have any extra info to put in the content panel, so it would look kind of redundant to have it there.
    Also, each panel has a different amount of content, but they all default to the same height to fit the largest content. I want them to fit to the content of each panel. The only thing I've read said to set the height of the content panel to 100% in the CSS, but it didn't change anything.
    Thanks!
    Andrea
    http://www.andreamutsch.com

    You make it look so simple but it doesn't seem to be working for me...
    My first thought with getting rid of the tab content was to simply delete it, but when I do that I get a warning that 'The structure of the accordian appears to be damaged'. Then when I preview none of the tabs will open.
    This is what my accordian structure looks like with the tab content code deleted...
    <div id="Accordion1" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">home</div>
            </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">graphic design</div>
            <div class="AccordionPanelContent">
              <p align="center">identity </p>
              <p align="center">print </p>
              <p align="center">packaging</p>
              <p align="center">web </p>
            </div>
          </div>
    <div class="AccordionPanel">
            <div class="AccordionPanelTab">photography</div>
            <div class="AccordionPanelContent">
              <p>traditional</p>
              <p>digital</p>
              <p>retouch</p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">contact</div>
            <div class="AccordionPanelContent">
              <p>email me</p>
              <p>design quote</p>
              <p>purchase photography</p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">resume</div>
            <div class="AccordionPanelContent">download resume (.pdf)</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">design blog</div>
            <div class="AccordionPanelContent">2009</div>
          </div>
    Also, getting rid of the height in the CSS had no effect (I did this before I did the above)
    Below is my current CSS for the Panel Content
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: large;
        background-color: #633408;
        font-weight: normal;
        word-spacing: normal;
        text-align: center;
    Also there is a note in the CSS that says this...
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    I'm not sure how accurate that is since I don't have a height in there and it worked (although not how I wanted) but I just thought I would throw it in.

  • Resizing Accordian based on the content in each component within in it.

    Hi,
    I wanted to know whether is there a way to resize Accordion
    component based on the content in the present tab.In my Accordion I
    am using four Canvas as its four children.The data in each of the
    canvas changes based on the Accordian tab selected. I want to
    dynamically resize the entire accordion based on the content in the
    canvas for that tab.
    In short the height of the Accordion need to change
    dynamically based on the tab selected. I have tried using the
    resizeToContent property but this didn't solve the problem.
    Thanks,
    amar.

    Hi,
    We can resize it.Always give the height and weight in
    percentage format. and turn off the horizontal n vertical scroll
    policy in u r main application.
    Hopes it helps you...

  • Fit to contents does not fit

    How do I set up the stage to it fits the contents exactly?
    There is always a border of 100 or so pixels.
    Basically I have to batch extract a bunch of images from FLA
    files and put them in their own .fla so I can batch publish them
    with a project file. So another solution could be is there a way to
    batch export the FLAs as images? The image files do not have that
    extra space around the images. Thanks ahead.

    ok so I figured it out. Match Content does not necessarily
    mean match content, it means set the stage to the content AND add
    equal spaces around the content. So if you want to fit just the
    content, move the content to the upper left hand corner.
    Not sure if this is rtfm case, i mean I can write a function
    that says add but in the manual it explains that the add function
    actually adds and subtracts.

  • When I try to print from the browser, it only prints about 1/3 of the page, it doesn't shrink the contents, just truncates the print area.

    Currently running FF 3.6.8, with W 7 home professional. Every time I try to print from the FF browser, it truncates the print area to about 1/3 of it's normal size. It doesn't shrink to fit the content, just the print area. I've checked all the settings and they look normal. This only happens in FF, I can go to the same url in ie and it will work just fine.
    == Every time I try to print directly from the browser.

    See this:
    [http://kb.mozillazine.org/Problems_printing_web_pages#Prints_to_a_small_portion_of_the_page]

  • How to adjust the Fonts to fit the component

    The size of the text is much smaller than the size of the button. But when I put the letters onto the button, they are not properly shown. Instead of showing the whole letters, they become "..." on the button. I can not see them at all unless I make the window/frame to its full size.
    How to adjust the Fonts or the properties of the components?
    Thanks.

    The best way is to use a layout manager, so that your component is laid out automatically to fit.
    If you really want to adjust the font size according to the size of the component, you would have to first retrieve the FontMatrix for your font, calculate the width of a particular string of text and see if it fits the component. However, why do that if you don't need to?

  • Dynamically initialize component properties at the time of inclusion

    Hi there,
    I would like to include an TextImage component in my page through code inclusion.  However, I would like to set the size of the image to be certain size.  When the author clicks on the component, the size should have been set already. 
    Is this possible?
    Thanks,
    --Mei

    Hi Guys,
    How are you? I'm currently facing the following problems as discibed below. First of all I'd like to mention that I make the difference between Cost Component Structure for COGM and Primary Cost Component Split. I also make the difference between Main cost component structure and Auxiliary cost component structure. But what I do miss is how to configure it from Technical Point of view and of course how to see the results.
    There are several requirements how to configure in SAP Primary Cost Component Split:
    1)You assign a cost component structure in the CO version in Cost Center and Process cost planning!  Which Cost Component Structure? The Primary Cost Component Structure or the Cost Component Structure for COGM?
    2)You determined the prices through planned price iteration! Do we set this indicator in the CO Version itself?
    3)You define a Cost Component Structure for Primary Cost Component Split of Product Cost Planning! How do we define it, via simply checking the check in OKTZ?
    I want to understand when you create Cost Component Structure for COGM and Primary Cost Component Structure, which one of these 2 needs to be assigned in the CO version in Cost Center Accounting?  Other thing is when you create Primary Cost Component Structure and its components, DO THEY INCLUDE ONLY RANGE OF PRIMARY COST ELEMENTS OR IT IS A TECHNICAL STEP ONLY TO CHECK THAT CHECK IN OKTZ FOR Primary Cost Component Split. Let me know, thank you very much for your help and cooperation again!
    Best Regards,
    Georgi Georgiev

  • I have recently purchased a hybred 750GbHDD as an upgrade for my MAC Book Pro (Intell Version) I have a boot camp partition to the original 500GB HDD. How can I expand both partitions to fit the new drive?

    I have recently purchased a hybred 750GbHDD as an upgrade for my MAC Book Pro (Intell Version) I have a boot camp partition to the original 500GB HDD. How can I expand both partitions to fit the new drive?
    I have tried bootcamp and have had no luck due to the fact that boot camp doesn't see the additional HDD space of 250Gb. What am I not doing?

    Ouch, well there is a problem.
    This is the stack of partitions on your old drive
    EFI (hidden)
    Lion (50GB say)
    Bootcamp (50GB say)
    Lion Recovery Partiton (hidden)
    This is the same stack on your new drive imaged from the old one.
    EFI (hidden)
    Lion (50GB say)
    Bootcamp (50GB say)
    Lion Recovery Partiton (hidden)
    Emtpy Space (100GB say)
    This is what you want
    EFI (hidden)
    Lion (100GB say)
    Bootcamp (100GB say)
    Lion Recovery Partiton (hidden)
    EFI has to be at the top of the drive and Lion Recovery has to be at the bottom of the drive.
    And you only have four partitions.
    You can't move the Lion Recovery Partition or Bootcamp partiton, however you can expand the Lion Partition into empty space below it. (but can't delete or move the Lion Recovery partition)
    Your Duplicator duplicated perfectly, too perfectly Likely would work with same sized drives/partitions.
    This is what your going to need to do.
    You need to move the Bootcamp partition to a blank external drive using WinClone and disconnect. This is so you have two backups of it. (one on your old 500GB drive)
    You will need a drive enclousre or IDE/SATA to USB adapter cable for the older 500GB drive and option key boot from it. (some enclosures can't be booted from so check first Other World Computing is good place to ask)
    Download the free Carbon Copy Cloner, grab any new files off the new 750GB internal drive to the old 500GB your booted from.
    Open Apple's Disk Utility and Erase with Zero option the entire internal 750GB drive and let it rip, this will map off as many bad sectors and improve reliability.
    Now use Carbon Copy Cloner to clone the 500GB Lion + Lion Recovery Partitions to the internal 750GB, it will "fix" things and place Lion Recovery at the bottom of the drive where it belongs, give all the extra space to OS X Lion.
    Next your going to have to follow WinClones instructions to restore your Bootcamp, likely you will have to recreate the Bootcamp partition first (in Bootcamp) to the size you want and then clone. Likely Winclone may "fix" Windows to recognize it's in a new larger partition now. I don't know you'll have to check as I haven't used it.
    When Bootcamp creates the partition it will place it near the bottom next to the Lion Recovery Partition.
    As you know you will have to re-validate Windows with Lord Redmond or it expires as you changed the hardware.

  • Booklet .pdf with crop marks, booklet doesn't fit the current paper size warning

    Hello. I am on XP using CS4 InDesign.
    I have the document set up as 4 pages, each 8.5 x 11, however, when creating a booklet .pdf, I mean it to be 2 pages 11x17.
    When I add in the crop marks they do not appear on the .pdf when it is created. I receive a warning in the booklet diaglog that the booklet doesn't fit the current paper size and it says to specify a larger paper size.
    What can I do to have the crop marks on my file? I understand the .pdf will be a little larger than 11x17 in order to fit the crop marks.
    Thanks for any help in advance.

    Hi Peter,
    Thank you. I did try that first, but now I figured out what I did wrong. When the .pdf was made and opened, I cropoped the page according to the marks, but the page remained 12 x 18 instead of 11x17. I made sure that the "automatically adjust to fit marks and bleeds" and "use document bleed settings" was checked in the booklet dialog and print InDesign dialog.
    When I cropped the page again to make sure I sized it correctly, it was 11x17.
    Thank you!!!

  • Dynamic footer row prints outside the content area

    Hi,
    I'm using LiveCycle Designer ES 8.2.1. I also have a web application injecting data into the report I created with LiveCycle. The basic structure is the following:
    1 Master page with 1 page and a content area containing a table filled with a list of object. My table has 1 header row, 2 body rows and a footer row that is added dynamically with page break condition.
    The logic behind that is written in FormCalc. Our objects are sent as a list which fills either one or the other body row based on a type. Each object has an "authority" property with a certain value that are used to mark the pages. The list of object is sorted by authority. So, when the current iterating object has a different authority than the previous one, we insert a page brake and the footer row. Everything is wraped in a subform that is "In Content Area" (Object/Pagination/Place).
    The problem is that the footer row is not considered as part of the content area. If the last line of a section fits tight in the content area, the footer row overflows outside the content area and even the whole page in some cases.
    Here are more details:
    We tried any combination of subform wraping and ticking of the "Allow page break with content" check box.
    We tried changing the type of the footer row for a body row in case footers were different than body rows.
    We tried every combination of "Keep with" and "place".
    We tried to change the footer row to a body row and have it displayed on every page and that work, but our client refused the solution...
    Starting with the above (pt 4) template and changing back the body to footer row brought us to the begining
    To the best of our knowledge, we tried everyting possible...
    What I'm looking for is either a confirmed bug for version 8.2.1 about this or a solution other than redesigning the whole report.
    Best regards,
    Sylvain Cloutier

    Hi,
    I know this might no help to solve my issue, but this document doesn't belong to me and I'm afraid I cannot share the file on the internet. It belongs to our client to whom we offer support on this. You know... I'd probably lose my job!
    Though, I've been trying with Adobe LiveCycle Designer ES4 11.0.0 and the same problem occurs. It looks like the row is added to the table after the whole document was produced, so it seems to be working as designed.

  • Dynamic datatable in custom component

    hi all,
    i'm working on a custom jsf component and this component will create a datatable dynamically. (you can see component details from http://www.jroller.com/page/hasant?entry=creating_dynamic_datatable_inside_of AND http://www.jroller.com/page/hasant?entry=jsf_question_for_community_what)
    the question is; when i want to add a selection column(dynamically), how can i handle its selected values?
    i mean, if i have created this datatable in a page with designer, i would bind an Integer[] to that selection column's checkboxes. But i have to add this selection column dynamically from my component. So, how can i GET and SET the selection columns values. Since this is a custom component, there is no backing bean for value binding to this component.
    when i resolve the request param string to get the selected rows, it's working(=i can see the selected rows somehow..) but, i can not set that values again while encoding that column after a submit.
    here is my row selection column encoding code;
         private void addSelectionColumnToTable(FacesContext context, UIData table) {
              UIColumn column = new UIColumn();
              HtmlInputRowSelect rowSelect = new HtmlInputRowSelect();
              rowSelect.setId("rowSelect1");
              rowSelect.setStyleClass("inputRowSelect");
              rowSelect.setValue(m_selectedRows);
              column.getChildren().add(rowSelect);
              table.getChildren().add(column);
         }In the code above, rowSelect.setValue(m_selectedRows); part not effecting anyhing. m_selectedRows variable includes row numbers(in an Integer array) that i want to see as selected.
    any solution/recommendation?

    Well if you are still interested in using a text component
    instead of a Button the way you would go about this is using
    textWidth. Here's how I've done it before using a text / label
    whatever you want that shows text.
    // => Set our text we got from database
    myText.text = "This is the text I got from the DB";
    // => Validate it so that way we make sure we get right
    numbers
    myText.validateNow();
    // => Find out how wide our text really is.
    var textWidth:Number = myText.textWidth
    // => Reset the width of our text component and add 20 for
    a little buffer
    myText.width = textWidth + 20;
    Now my suggestion is if your going to be dynamically creating
    these on the fly from a database call you throw it into a method /
    class and have that do all the work for you so all you have to do
    is pass the text to it and it resizes itself based on the example
    above.

  • Dynamic Regions w/Train Component

    I'm working on a web app (JDeveloper 11g) where one page has a dynamic reqion with a task flow associated with it that sets the fragment for the view. Most of the fragments for this region use a page template with a train component. Navigation using the train component mostly works fine- the fragment is replaced by a new fragment each time a train link is clicked.
    However, one fragment contains another dynamic region. I tried to set the scope of the bean managing this region to viewScope, but I get a popup message in the browser "viewScope.myManagedClass.dynamicTaskFlowId" is invalid" when I click the train component link for the fragment. I get a similar error if I set the scope of the bean to session or pageFlow. Only when I set the scope to backingBean or None do I avoid the error message.
    But then another problem occurs. One of the fragments in the flow for the inner region has a panelAccordion with several showDetailItems consisting of selectManyCheckboxes. The panelAccordion doesn't list anything, and locks up if I try to open or close any showDetailItem. This behavior is similar to when the scope for the bean managing the flow is not set to viewScope or higher.
    In stepping through the code, I noticed that the outer region's flow code runs after the inner region's trigger event code that sets the inner region's taskFlowId, but before the inner region's flow code, so the inner region's taskFlowId setting is lost. I tried throwing the setting into session context and retrieving it, and that almost works. If I actually select any of the selectManyCheckboxes, they are lost once I move to a different fragment in the inner region.
    Does anybody have any ideas on how to I get this page working, alternatives to the approach I'm taking, settings I should check, and/or any reference material I could consult?
    Thanks in advance!
    Edited by: tmurphy on Jul 6, 2010 3:30 PM

    Hi,
    However, one fragment contains another dynamic region. I tried to set the scope of the bean managing this region to viewScope, but I get a popup message in the browser "viewScope.myManagedClass.dynamicTaskFlowId" is invalid" when I click the train component link for the fragment.
    Is the managed bean defined in the metadata definition of the bounded taskflow that you load ? Note that bounded task flows are only initializing their managed beans when they are loaded. If you define the managed bean in the parent bounded task flow then the viewScope also is the one of the parent flow. Appears as if this is the problem you describe
    Frank

  • Make the panel fit the image so MouseListener only invoke when click  image

    I want to add MouseListener to only the image itself. So I draw the image onto a image panel, add that panel onto the main panel, then add the main panel onto the frame. However, my problem is that the size of my image panel is too large, it take up almost the entire frame. So my mouselistener response not only when I click onto the image, but also anywhere in my image panel. I try to resize the image panel to fit the size of my image, but no luck. Is there a solution for this. I feel like, it got something to do with the layout. Here is my code, if you mind read it. Thank you very much
    import java.awt.BorderLayout;
    import java.awt.Color;
    import java.awt.Dimension;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.Image;
    import java.awt.Toolkit;
    import java.awt.event.MouseAdapter;
    import java.awt.event.MouseEvent;
    import java.awt.event.MouseMotionListener;
    import javax.swing.*;
    public class ImageRotate
         private static final String LABEL = "MIDI PROTOCOL";
         private JPanel mainPanel = new JPanel();
         private JPanel labelPanel = new JPanel();
         public ImageRotate()
              mainPanel.setOpaque(true);
              mainPanel.setBackground(Color.YELLOW);
              mainPanel.setLayout(new BorderLayout());
              Font labelFont = new Font("serif", Font.BOLD, 30);
              createLabelPanel(LABEL, labelFont);
              labelPanel.setOpaque(false);
              mainPanel.add(labelPanel, BorderLayout.NORTH);
              Drawing d = new Drawing();
              d.setOpaque(true);
              d.addMouseListener(new MouseAdapter(){
                   public void mousePressed(MouseEvent e)
                        System.out.println("Pressing on the image");
              d.addMouseMotionListener(new MouseAdapter(){
                   public void mouseDragged(MouseEvent e)
                        System.out.println("Dragging the image");
                   public void mouseMoved(MouseEvent e)
              mainPanel.add(d, BorderLayout.CENTER);
         private void createLabelPanel(String str, Font font)
              JLabel label = new JLabel(str);
              label.setFont(font);
              label.setForeground(Color.RED);
              labelPanel.add(label);
         public JPanel getPanel()
              return mainPanel;
         public static void main(String args[])
              JFrame frame = new JFrame();
              frame.getContentPane().add(new ImageRotate().getPanel());
              frame.setSize(new Dimension(300, 300));
              frame.setVisible(true);
    class Drawing extends JPanel
         Image img;
         public Drawing()
              setSize(new Dimension(100,100));     //Try to make the panel fit the image...NO LUCK
              setBackground(Color.GREEN);     
              img = Toolkit.getDefaultToolkit().createImage("images/nob.gif");
         public void paintComponent(Graphics g)
              super.paintComponent(g);
              Graphics2D g2D = (Graphics2D)g;
              g2D.drawImage(img, 40, 40, this);
    }

    yunaeyes wrote:
    In class Drawing extends JPanel, I did try to to set the panel to the image size but no luck there,
    both setSize(new Dimension(100,100)), setPreferredSize(new Dimension(100,100)) does not make the panel smallerIt can be made to work. I find it hard to comment on unseen code.
    >
    BigDaddyLoveHandles wrote:
    I think a better approach is to handle the mouse click properly -- see if the click is over the image or not.Can you elaborate on this?The mousePressed method you posted assumes you are over the image. Check the mouse coordinates! If the component is bigger than the image this may not be so.

  • [solved] Make content fit the TitleWindow's size proportionally

    Hi everyone,
    I have a component which has the super class TitleWindow. It's basically used as a popUp for my application. So it receives a file name and adds it to the popUp using the MXML tag Image.
    This content received is a SWF file, and I had no problems using the tag Image to import it (I'm new to Flex, but I guess there is nothing wrong with it).
    My problem is that my application has a sort of "PowerPoint" style, and is going to be used in some presentations, so I want to make sure it works on all screen resolutions, from 800x600 till 1280x1024. And that's where the problem begins.
    I could simply let Flex determinate the size of my popUp (depending on what is the size of the content, the SWF file), but I simply can't. That's because all of the SWF files are going to be 800x600, and so when you run this app in a 800x600 screen, things get messy. The popUp gets too big (in order to contain the content).
    So the solution was to manually set the size this popUp, based on the user's screen resolution. I did this simply by using:
    this.width = stageWidth * 0.9;
    this.height = stageHeight * 0.8;
    This works great and is exactly what I want.
    However, the content is not being fitted into the popUp correctly anymore. It seems after setting manually the width and height of my popUp, all of those wonderful properties, such as horizontalAlign="center" and verticalAlign="middle",  were lost also. The content is too big when seeing the app in a 800x600 computer, while the popUp is on a correct size.
    So I tried to resize the content also, based on the this.width and this.height. That solves some trouble, but then the problem is that X and Y positions are all messed, and so my content appears on wrong places, depending on the user's resolution.
    Straight to the point: after customizing the width and height of my popUp (TitleWindow) how can I set the content to keep the aspect ratio (don't get distorted, since it's a 800x600 file) and also to be resized according to the dimensions that popUp has? I'm here for like 6 hours just trying and failing to do it, and it must be an easier way to do it in Flex.
    Appreciate any advice.
    Thanks!
    Solved: I changed the Image tag for the SWFLoader tag. Also, added the property horizontalAlign="center". The rest was the same, and this solved my problem :D Weird.. I saw on some tutorials that Image could be used without problems to load SWF files... Well, works, and for sure it must be more correct also.

    Solved: I changed the Image tag for the SWFLoader tag. Also, added the property horizontalAlign="center". The rest was the same, and this solved my problem Weird.. I saw on some tutorials that Image could be used without problems to load SWF files... Well, works, and for sure it must be more correct also.

Maybe you are looking for