Div or iFrame resize depending on content.

Can you hide a div unless you make it visible when being
clicked? How?
I have tried to use an iFrame for this, but cannot make it
right. I cannot make the div being resized depending on the content
of the page being targeted. That is why I have thought about maybe
using divs in stead.
I hope someone understand what I mean! Can anyone help?
/ Lena

I have tested several iframe resize techniques and the link
to the following
works best for me.
IFRAME SSI - II
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
The instructions are pretty straightforward.
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Similar Messages

  • Iframes and automatic resizing to fit content displayed.

    Hi
    Is it possible to display an iframe on your page with content inside that resizes and then have the iframe resize with it so you dont have to use scroll bars or make the page size really big.?

    If the iframe page is hosted on your domain, yes, there is a jQuery plugin for this. 
    http://github.com/house9/jquery-iframe-auto-height
    If the iframe page is hosted externally, it won't work.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • IFrame Resizing

    I know that we can resize the IFrame based on the height of the Content.
    Now the problem I have is that I am using a URL iView and want the height of the IFrame to be auto adjusted based on the content shown in the IFrame.
    To achieve this I need to call a Javascript function to resize the IFrame, but I don't know how to get handle of the current IFrame. This IFrame is generated by the Portal Framework and there is no ID/Name attached to it.
    So is there a way to get the handle of the IFrame from within the content. For e.g. can the content get access to the IFrame in which it is being shown.
    Thanks in Advance.
    Ankur

    Ankur
    You can get the portal to resize the content automatically using the propertys of the iview/page and setting the page height to automatic. However, this will only work if the domain of the website that you are accessing is the same domain as the portal, i.e. if your portal is myportal.mydomain.com then the domain of the portal is mydomain.com. If the website is then mywebsite.internaldomain.com, then, unless the websites domain (by default) is mysebsite.internaldomain.com. Even if the website relaxed its domain to internaldomain.com the automatic resizing would not work. This is a security feature of browsers and can not be coded around. There are threads regarding the 'Access Denied' messages when trying to perform cross-domain scripting
    I hope this helps
    D

  • Iframe not scrolling to content below set height in IE9

    Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
    All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional:  In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height.  That is, is does not scroll to show the rest of the iframe page.
    I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
    I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div).  I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
    It has to be a simple fix, or others would be having this IE9 issue, too, right?
    Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
    Anyone know what is going on -- and how to fix it?
    I apologize for how jumbled both the CSS and source code is for this site.  If I were recreating the site today, I could do a much cleaner job.
    Here are a few tries:
    http://cbm1.com/retail_property_listings/costar.html
    http://cbm1.com/retail_property_listings/costar3.html
    This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9.  Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
    http://cbm1.com/retail_property_listings/costar4.html
    Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

    Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
    All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional:  In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height.  That is, is does not scroll to show the rest of the iframe page.
    I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
    I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div).  I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
    It has to be a simple fix, or others would be having this IE9 issue, too, right?
    Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
    Anyone know what is going on -- and how to fix it?
    I apologize for how jumbled both the CSS and source code is for this site.  If I were recreating the site today, I could do a much cleaner job.
    Here are a few tries:
    http://cbm1.com/retail_property_listings/costar.html
    http://cbm1.com/retail_property_listings/costar3.html
    This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9.  Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
    http://cbm1.com/retail_property_listings/costar4.html
    Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

  • How to increase height of IFRAME without refreshing its contents.

    Hi,
    I want to increase height of an IFRAME inserted in HTML,
    presently i am doing this by specifying
    var frameSrc = myFrame.src;
    myFrame.height = newHeight;
    myFrame.src = frameSrc;
    but as this refreshes the IFRAME i can see the time lag in the loading of page specified as src of IFRAME.
    Is there any better way to resize the IFRAME without reloading its contents.
    Thanks in advance.

    Why don't you add width and height where you had IFRAME tag?
    <iframe id="hiddenFrame" name="hiddenFrame" src="/myWeb/blank.html" style="width: 100; height: 300; visibility: hidden"></iframe>

  • IFrame blocking rest of content

    Help - not very familiar with iFrames in CS5.
    I got the iFrame to show up, but it's blocking the rest of the content with white. What am I doing wrong? Is it a positioning thing?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    </script>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title</title>
    <link href="_css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    </script>
    </head>
    <body onload="MM_preloadImages('_images/button_homeON.jpg','_images/button_worksON.jpg','_image s/button_connectON.jpg')">
    <div id="mainContent">
      <div id="navigation"><img src="_images/topBar.jpg" width="750" height="49" alt="Cover Puppy" /></div>
      <div id="splitContent_left">
        <div id="iframe">
          <iframe src="covers.htm" height="591" width="305" scrolling="no" frameborder="0">
        </div>
      </div>
      <div id="splitContent_right">
        <div id="buttons"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','_images/button_homeON.jpg',1)"><img src="_images/button_home.jpg" alt="Home" name="home" width="135" height="27" border="0" id="home" /></a><a href="works.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('works','','_images/button_worksON.jpg',1)"><img src="_images/button_works.jpg" alt="How it Works" name="works" width="148" height="27" border="0" id="works" /></a><a href="connect.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('connect','','_images/button_connectON.jpg',1)"><img src="_images/button_connect.jpg" alt="Connect" name="connect" width="162" height="27" border="0" id="connect" /></a></div>
        <div id="textHome">WELCOME!<br /></div>
      </div>
      <div id="footer"><img src="_images/bottom.jpg" width="750" height="10" /></div>
      <div></div>
    </div>
    </body>
    </html>

    Add
    overflow="hidden"
    to the attributes in the iframe tag.

  • Div box gets relocated depending on browser and monitor size. HELP!!!!!!!!!!!

    div box gets relocated depending on browser and monitor size. HELP!!!!!!!!!!!

    This is usually caused by malformed HTML, CSS and/or the use of absolute positioning in primary layouts.  Without a link, it's all guesswork on how to fix it though. 
    Nancy O.

  • Muse Pages don't resize to text content

    Hi,  I'm new to Muse and am stuck on the following:
    Muse Pages don't resize to text content
    This is a link to the site page in question: ABOUT  |  Total Clothing Solutions
    The shopping basket widget does not affect the page, it does the same without it.
    many thanks in advance
    Kind Regards Gem

    Hmm... I think we'll need a screenshot or a bit more explanation in order to help. Here's what that webpage looks like for me. Without knowing more of what's it's supposed to look like, it's difficult to know what's not working as you're expecting?  Thanks.
    If you're using Object > Insert HTML, you need to size the HTML object to the height the HTML will be in the browser. The output generated by Muse will attempt to maintain the distance from the bottom of the HTML object to the top of the first object that's lower down on the page after the HTML expands to it's full size in the browser. Therefore if you don't resize the HTML object to its expected final height, or larger, in Muse Design view, there will be a large gap below it in the browser. It sounds like that may be what you are/were seeing? Even though I don't see that on this page.

  • Dynamic flv player with auto resize based on content

    Hi,
    I would like to build a .flv player which can accommodate 7
    different video sizes.
    This will probably be made using php and xml to dynamically
    control content.
    What I would like to know is if and how it is possible to
    have a holder.swf (just looks for variables to display the flv)
    that can automatically resize based on the flv dimensions. I dont
    want any kind of browserscreen resolution resizing of content, just
    an swf that will change its size from say 320x240 to 450x253
    depending on the dynamically loaded flv.

    The same thing has been reported for the T410. You can see how to fix it here:
    http://forums.lenovo.com/t5/T400-T500-and-newer-T-series/T410-unstable-screen-brightness/m-p/212492#...
    It appears to occur anytime you are on battery and the intel graphics power plan is set to anything other than 'maximum performance.' It's pretty subtle, but really annoying when it happens.

  • Auto Resize Header and Content Within?

    I want a header that is always 20% the height of the webpage, so that when I resize, the porportions always stay this same. This isn't so hard to figure out. However, I also want the content within the header (buttons, etc.) to resize. Can anybody help? Here's my code.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
              margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
              padding: 0;
              text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
              color: #000000;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 100%;
              background-color: #191919;
              background-image: url(../Images/repeat.jpg);
              background-repeat: repeat;
    /* Tips for Elastic layouts
    1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
    2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
    3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
    .oneColElsCtrHdr #container {
              width: 100%; /* the auto margins (in conjunction with a width) center the page */
              border: 0px none #000000;
              text-align: center; /* this overrides the text-align: center on the body element. */
              margin-top: 0;
              margin-right: auto;
              margin-bottom: 0;
              margin-left: auto;
              background-color: #FFFFFF;
              background-image: url(../Images/repeat.jpg);
              background-repeat: repeat;
              color: #FFC;
    .oneColElsCtrHdr #header {
              width: 100%;
              padding-top: 0;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              background-color: #DDDDDD;
              background-image: url(../Images/headerwlogo2.jpg);
    .oneColElsCtrHdr #header h1 {
              margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
              background-attachment: scroll;
              background-image: url(../Images/headerwlogo2.jpg);
              background-repeat: no-repeat;
              padding-top: 0px;
              padding-right: 0;
              padding-bottom: 0px;
              padding-left: 0;
              height: 140px;
              width: 100%;
    .oneColElsCtrHdr #mainimage {
              background-color: #FFFFFF;
              width: 100%;
              margin: 0px;
              padding: 0px;
    .oneColElsCtrHdr #yellowbar {
              background-color: #FFFFFF;
              width: 100%;
              background-image: url(../Images/seperatebar.jpg);
              background-repeat: repeat-x;
              height: 15px;
    .oneColElsCtrHdr # {
              background-color: #FFFFFF;
              width: 100%;
    .oneColElsCtrHdr #mainContent {
              background-color: #FFFFFF;
              background-image: url(../Images/repeat.jpg);
              background-repeat: repeat;
              padding-top: 0;
              padding-right: 22px;
              padding-bottom: 0;
              padding-left: 22px;
    .oneColElsCtrHdr #footer {
              padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
              background:#DDDDDD;
    .oneColElsCtrHdr #footer p {
              margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
              background-image: url(../Images/footer.jpg);
              background-repeat: repeat-x;
              height: 140px;
              width: 100%;
              padding-top: 0px;
              padding-right: 0;
              padding-bottom: 0px;
              padding-left: 0;
    -->
    </style>
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColElsCtrHdr">
    <div id="container">
      <div id="header">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">About the Project</a>
            <ul>
              <li><a href="#">Project Overview</a></li>
              <li><a href="#">The Collaborators</a></li>
    </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Earthwork Sites</a>
            <ul>
              <li><a href="#">About the Sites</a></li>
              <li><a href="#">Media Gallery</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">Interactive Badges</a>
            <ul>
              <li><a href="#">Badge Overview</a>          </li>
              <li><a href="#">Lifelong Learning</a></li>
    </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
            <ul>
              <li><a href="#">Blog</a></li>
              <li><a href="#">FAQ</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="mainimaget">
        <img src="../Images/mainillustrationbig.jpg" width="100%" height="auto" />
      <!-- end #mainContent --></div>
      <div id="yellowbar">
         </h1>
      <!-- end #mainContent --></div>
      <div id="mainContent">
        <h1> WELCOME TO EARTHWORKS</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <p> </p>
      <!-- end #mainContent --></div>
      <div id="footer">
        <p> </p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    I want a header that is always 20% the height of the webpage,
    Web Page height is ALWAYS determined by content; not explicit values.  If I increase/decrease text size in my browser, it will change the height of your page.  So page is height is an unknown variable.
    I also want the content within the header (buttons, etc.) to resize.
    Why do you think you need this?  Your browser's Zoom feature is fully capable of re-scaling images and text on screen.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com/

  • Smart Objects: How can I prevent resizing when replacing contents?

    There seem to be 2 kinds of smart objects:
    One kind where you can replace the contents, no matter what size it has and it will fit into the bounding box of the smart object which is already there.
    The other kind where this doesn't happen.
    Is there any way to control that behaviour? I found that in older PS-files, replacing contents always made the new content fit into the bounding box, but since CS3, the transformation stays the same which means I have to rescale the smart-object if the content-size has changed.
    Example:
    Imagine a game cover with screenshots on the back side. Now each screenshot is a smartobject.
    All Screenshots are at 640x480 (assumend the standard screen dpi of 72)
    Now I found them in a better resolution (1024x768, also 72dpi) and replace the old ones with "replace content".
    The old photoshop behaviour: Photoshop would fit the larger image to occupy exactly the same area than it's predecessor.
    The new behaviour: The whole Smartobject is enlarged by 160% (not the transformation parameters, the visual appearance.), I have to scale it down to make it fit to the old size.
    And I really wonder about having older and newer Photoshop-Files where these Smartobjects behave differently.
    Now did I miss something in the help section or is there a way to control this behaviour?

    Yes, fortunately, I am a Windows user, but I don't want to start a religious war here And it is also possible to run multiple versions of Adobe products simultaneously under Windows - why shouldn't that be possible? Currently I have CS3 and CS4 and somtimes use CS3 when CS4 is just too buggy to get the job done. Before that I had CS and CS2 on the same machine.
    But I wouldn't keep all versions back to PS 6.0 or CS, that would be a bit too chaotic and I'd had to spend days of installing if I get a new computer. I expect those programs to be a little bit backwards-compatible, so I don't have to use many different versions. And for Photoshop, this is mostly the case. It's just very tiny details like Smart Object resizing that seems to work differently.
    Otherwise I'm really happy that in CS4 I can finally link Masks to smart objects and apply warp and perspective on them, that's a big plus!

  • Iframe of a Blob Content in Apex form/report

    Hi All
    I am developing a application where users will upload documents which will be stored in blob column. Now the requirement is to show the document with in the page using Iframe. Can some one please suggest the steps to show the blob content in iframe.
    Thanks in Advance.
    regards
    Srini.

    You can show the documents in an iframe only if your browser has an appropriate plugin (like to most browsers have it for pdf documents). Otherwise you will be forced to either save the document or open it with the appropriate programm. Means, your application will probably fail to show the documents in an iframe for all other document types other than pdf.
    I have no special case explaining how to display a document in an iframe but you can inspect it here:
    http://apex.oracle.com/pls/apex/f?p=31517:15
    and
    http://apex.oracle.com/pls/apex/f?p=31517:58
    Denes Kubicek
    http://deneskubicek.blogspot.com/
    http://www.apress.com/9781430235125
    http://apex.oracle.com/pls/apex/f?p=31517:1
    http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
    -------------------------------------------------------------------

  • Group not resizing correctly when contents are moved programmatically

    Hi there,
    My apologies in advance if this is a known issue. I searched the forums but I was unable to find a discussion about this topic. The issue we are running into is when we programmatically move the contents of a Group which is in turn enclosed within a Scroller beyond the Scroller's limits the position of the Group within the stage is incorrectly calculated. This will cause mouseEvents in the area beyond the Group's limits to be "ignored" among other problems.
    I have created an application to illustrate the problem, we are in 4.1:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
        minWidth="955" minHeight="600"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <fx:Script>
            <![CDATA[
                import mx.controls.Alert;
                private function onGroupClick(event:MouseEvent):void
                    Alert.show("It works");
                private function onButtonClick(event:MouseEvent):void
                    rect.x += 500;
                    rect.y += 500;
            ]]>
        </fx:Script>
        <s:Scroller
            width="100%" height="100%">
            <s:Group id="myGroup"
                width="100%" height="100%"
                click="onGroupClick(event)">
                <s:Rect id="rect"
                    x="0" y="0" width="10" height="10"/>
            </s:Group>
        </s:Scroller>
        <s:Button
            label="Move Rectangle"
            click="onButtonClick(event)"/>
    </s:Application>
    Steps to reproduce:
    Click anywhere in the screen - notice that an alert that reads "It works" shows up.
    Click on the "Move Rectangle" button enough times for the coordinates of the Rectangle to exceed the limits of the Scroller, hence producing scroll bars.
    Scroll all the way to the right and to the bottom.
    Click right next to the right bottom corner - notice that no alert is displayed. The reason is the Group has not resized correctly hence we are actually clicking outside the Group. Resizing your browser window for example will cause the Group to resize and events will again "work". FlexSpy will make things pretty apparent as well.
    Any pointers regarding where this bug lives in the source code or suggestions on how to fix this would be greatly appreciated, this issue is causing us a lot of pain.
    Thanks in advance!!
    ~ TheMadPenguin

    Thanks for logging this in the bugbase: https://bugs.adobe.com/jira/browse/SDK-29112. The latest comments there say:
    Reproduced in 4.0.0, 4.1.0
    Confirmed fixed in 4.5.0.19764
    A workaround for the 4.0.0 and 4.1.0 release would be to put the click handler on the Scroller instead of the viewport.
    Note: This bug seems to be fixed, but the fact that the width/height of  the Group doesn't change is still consistent (and correct).  Group has a  concept of size and content size, scrolling is enabled when the content  size is larger than the size (with Group.clipAndEnableScrolling set to  true which Scroller sets automatically).
    See this spec for more details: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Viewport
    Hans has a good article here: http://hansmuller-flex.blogspot.com/
    Here's a simple example that demonstrates width does not change:
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> 
         <s:Scroller width="100" height="100"> 
             <s:Group id="viewport"> 
                 <s:Rect width="100%" height="100%">
                     <s:fill><s:SolidColor color="red" /></s:fill>
                 </s:Rect>
                 <s:Button id="btn" label="out of view" y="150" click="btn.y += 50" />
             </s:Group> 
         </s:Scroller>
    </s:Application> 
    You might expect that this example should have a red background behind  the Button, but it does not.  That is because width/height of 100% on  the Rect is 100% of the width/height of the viewport, not the  contentWidth/contentHeight.
    One way of getting the behavior where the Rect expands across the whole content size would be to bind to contentHeight:
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> 
         <s:Scroller width="100" height="100"> 
             <s:Group id="viewport"> 
                 <s:Rect width="100%" height="{viewport.contentHeight}">
                     <s:fill><s:SolidColor color="red" /></s:fill>
                 </s:Rect>
                 <s:Button id="btn" label="out of view" y="150" click="btn.y += 50" />
             </s:Group> 
         </s:Scroller>
    </s:Application> 
    Note: You shouldn't specify or change the size of the viewport Group  inside of a Scroller.  The Scroller component manages the size of the  Group in a specific way and if the Group has a size that conflicts with  that then you can get into a bad situation that might cause infinite  loops.  Notice in my example the viewport Group has no size set on it.
    Thanks to SDK QE for the info!
    -Heidi

  • Is it possible to vary the height of a row depending on content - I am using a System.Windows.Forms.DataGrid

    I have traced all calls through Visual Studio code map to the critical methods used for painting the rows of data - but can not override anything because they are not public classes but internal classes (datagridrelationshiprow )or internal abstract classes
    ( DataGridRow ( windows.system.forms )  )
    If I could override methods in these classes - I feel I could then change code to change the height from the defult based on the content.

    I have traced all calls through Visual Studio code map to the critical methods used for painting the rows of data - but can not override anything because they are not public classes but internal classes (datagridrelationshiprow )or internal abstract
    classes ( DataGridRow ( windows.system.forms )  )
    If I could override methods in these classes - I feel I could then change code to change the height from the defult based on the content.
    Hello,
    Yes that is a good idea and it is possible, you could refer to the following thread.
    http://www.codeproject.com/Articles/5521/Advanced-DataGrid-sizing
    It is using c#, but we could convert it to vb.net, that document has shared the detailed methods which we need to deal with to resize the row.
    In addition, since there is a control DataGridView which has more features such as rows property and autosizemode which allows us set row's height, if possible you could consider using that control instead.
    Happy new year!
    Carl
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • DataGrid Not Resizing to Dynamic Content

    Hello,
    I'm using Flex 3.2. I have an editable DataGrid with no with
    and height specified. I do specify rowCount to something like
    rowCount="dataProvider.length". Everything looks good when the
    datagrid is first rendered with data in it. However, if the data in
    it changes after rendering, then the grid doesn't resize
    accordingly. Actually the grid may resize, but the border/frame
    doesn't.
    Example:
    I have a special TextArea component that grows (vertically)
    as the user types in more lines of text. I use this component as
    one of my item editors. If a cell is first rendered with only one
    line of text, then the user goes in and types additional lines, the
    grid row grow within it's border, but the not the border itself...
    causing some undesired scrollbars.
    I need a way to tell the datagrid to re-calibrate sizing just
    like it does when it's first created. Is there a way to do this? I
    tried datagrid.invalidateSize() and related procedures, but nothing
    happens. What do you think?
    Thanks

    "bfargo" <[email protected]> wrote in
    message
    news:gmcsal$34d$[email protected]..
    >I finding this datagrid sizing to be extremely
    frustrating as to say, HTML
    > tables. I just want it to look good. Anytime I do
    anything with dynamic
    > content, it doesn't size right, or I end up with a bunch
    of ugly
    > scrollbars,
    > etc. I just want to be able to add some content, and
    have the datagrid
    > grow
    > with it.. at least in height.
    > VariableRowHeight is set to true, I try setting rowcount
    to my
    > dataprovider
    > length. Event though the length may be 5, it'll randomly
    throw a bunch of
    > other rows in there. The behavior is just completely
    incoherent (at
    > least to
    > me). Nobody else has these problems? .
    Post code

Maybe you are looking for