Getting a wrapper container div to adjust to the height of the content within it.

Hey -
I have a "wrapper" div tag set up and then I have a bunch of separate div boxes within that.
The way I did it is all the div boxes within the wrapper are set to "absolute" position and then I basically put them all where I wanted them by defining the "top" and "left" property.
What I'd like now is the "wrapper" div to adjust in height according the size of the div boxes with in it.
How can I do this?
Thanks....

Height of a container needs to be determined by the content inside it. If your site visitors increase text size in their browser, and you have explicit height values expressed in your CSS, your page could fall apart or become unusable.
For better answers, we need to see your page. Can you post a link?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Who to get the height of the text in a Text Layout?

Hey, I'm using the text layout component offered by adobe labs. I read the documentation and now capable of doing almost all what I need. I just have a small problem. Lets say I have a text layout object on my stage containing some text. How can I know the height of the text or the number of lines in it ???
I found their is a porperty: "contentHeight" and a method "calculateHeight()" but they are in another class of the libraries that comes with the text layout component. I don't know how to reach them. Please help and write me the lines of code that do this job.
Thanks

Well I was going to suggest that you post in the TLF forums, http://forums.adobe.com/community/labs/textlayout.
But you seem to have found those. So instead I will suggest that you don't cross-post.
Really if anybody could answer that it would be the folks there. I know there isn't a lot of traffic in those forums, but that is because the TLF is really insanely complicated and it is still beta. But it looks like most questions there do get some kind of answer....

I have highlighted words in an .iba file. Now I need to increase the space before (and/or after) the paragraph it's contained in. If I increase the space after, the height of the highlighting increases also. Is there any way around this?

I have highlighted words in an .iba file. Now I need to increase the space before (and/or after) the paragraph it's contained in. If I increase the space after, the height of the highlighting increases also. Is there any way around this?

http://www.apple.com/feedback/kaywerty wrote:
A rather long winded way of asking if anybody knows if it's possible to have multi-windows open
It's not possible.
Suggestions here -> Apple Product feedback

Getting the height of the title bar of a JInternalframe

Hi,
How can i get the height of the title bar of a JInternalframe??
Please reply asap.
Thanks
Jatin

Try this.
myFrame.getUI().getNorthPane().getHeight();

Can you adjust the height of the toolbar button in the skin file?

Can I manually adjust the height of the toolbar navigation buttons in the skin file? It seems no matter how tall I make the nav panel, the buttons adjust size accordingly. Can I tell it to be 50% or something like that? For example, this is what I see for the glossary button.
<toolbaritem mode="BtnWithIcon Mode" type="built-in-glossary" id="4">
   <name>Glossary</name>
   <text>::??DefaultWebSkinText??::</text>
   <color></color>
   <image></image>
   <icontype>none</icontype>
   <selected>
    <color></color>
    <image></image>
    <icontype>none</icontype>
   </selected>
   <style>100</style>
</toolbaritem>
Notice I am not using custom images or anything, just plain text.
Thanks

Hi Josh
You must be someone that dearly loves digging into code.
The simplest way to adjust the buttons is to use the built in Skin Editor.
Hmmm, and in writing that response it occurs to me that you haven't exactly advised which of the outputs you are creating. The skin editor I'm referring to is the WebHelp skin editor. To open it, click View > Pods > Project Set-up. Once that pod is open you should see the Skins folder. Expand that and double-click the skin you are using to open and edit it using the skin editor.
Cheers... Rick

Making divs expand to the height of the highest div

I'm currently building my portfolio website. I'm not a coder and find it difficult so I really need simple answers if possible please. The page I'm working on can be found here: http://www.infomaticfilms.com/jack/jrimg/g_and_d.htm. It's far from finished as I don't want to move on until I fix this problem. This page will be a generic page for all the various project pages which means they will all have different heights. Rather than make individual pages for each project I'd like to make just one that I can use for all by merely deleting the content each time and re-saving the page. If you click on the Me or Contact link you can see the other pages to see the border. I read an article from Stack Overflow and I'm very close to the solution. I have a problem with Firefox though which adds 1 pixel to the right hand border. Here's the HTML:
<div class="contentAndBorders">
<div class="borderLeft"></div>
<div class="mainContentProjectPage">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
</div>
<div class="borderRight"></div>
</div>
I'm looking to put the content into the div with the class of mainContentProjectPage. I need the divs with the classes of borderLeft and borderRight to expand with the height of mainContentProjectPage which is what they do. It's basically three columns. The first and third columns are the white borders to the left and right and the middle column is for the content. Here's the CSS:
.contentAndBorders {
          width: 950px;
          position: relative;
          overflow: hidden;
.mainContentProjectPage {
          float: left;
          background-color: #F55816;
          width: 100%;
          padding-left: 24px;
.borderLeft {
          float: left;
          background-color: #FFF;
          width: 1.3%;
          background-attachment: scroll;
          background-image: none;
          background-repeat: repeat;
          background-position: 0px 0px;
          position: absolute;
          left: 0px;
          height: 100%;
          margin: 0;
.borderRight {
          background-attachment: scroll;
          background-color: #FFF;
          background-image: none;
          background-repeat: repeat;
          background-position: 0px 0px;
          width: 1.3%;
          float: left;
          position: absolute;
          right: 0px;
          height: 100%;
          margin: 0;
I don't really understand how it works, just that it does. If anyone knows a better way of achieving the same result then I'd be very grateful as this is the final part of my site. My question is does anyone know how to get rid of the extra 1 pixel on the right hand border? It looks perfect in Safari and Chrome. Any help and advice would be a life saver.
Thanks
Jack

I'm not a coder and find it difficult so I really need simple answers if possible please.
You need to understand HTML & CSS code. If you don't take time to learn the basics, you will continue to be frustrated by the process, your results and by our answers to your questions.
PART 1
Height is determined by page content. The more content a page contains, the longer the page is. All sites contain both long and short pages. So keep your design flexible. Don't paint yourself into a rigid box.
The CSS height property should never be used on containers that hold text as this will vary from user to user depending on their device and browser settings. Remove height values from your CSS code. If needed to reveal a background-image, for example, use the min-height: property.
PART 2
All browsers add default margins and padding (spaces) to every html element. If you want to shore up the spaces between elements, apply margin:0; padding:0 to all elements or incorporate a CSS Reset method into your site. http://cssresetr.com/
Finally, when you need a plumber, hire a plumber. Building web sites looks easy but it's not.   This site will be the first impression many people have of you and your body of work. You don't get 2nd chances at 1st impressions. So put your best foot forward. Hire an experienced web designer to help you or take some time off to learn everything you need to learn to do it right.
Best of luck,
Nancy O.

How to adjust the height of the tracks in timeline mode

I am trying to find my way around PE 10, have had the program for years but not used it. (I am using Win 7 on a 15" laptop, screen resolution is 1920x1080, 16 GB Ram, 4GB video RAM.) I took some video on vacation, in some clips there is a lot of wind noise. I know how to adjust the volume using key frames, but the tracks are only about ¼" wide making adjustment just about impossible. Full volume to zero is just a small fraction of an inch. I can zoom in on the track, but this doesn't make the track wider. Is there any way to do this?
Thanks,
David

Actually, I wanted to do this in a static table.
Just now, I learnt that this feature is not available in 12.0 as well as in other previous versions.
However, this will be implemented in Release 12.1.
Thanks,
Navin.

Getting Container Height With Dynamic Content Added

Hello,
I'm having issues getting a containers height after adding
content to that container. The code below shows you what I'm trying
to do. I have tried to validate the container and still get a 0 in
height. Is there a reason why this is happening because from my
point of view, after I add an object to the container the height of
the container should change. Please help.

Probably has to do with the fact you are calling check() in
applicationComplete, as this code works:

Flash jumps when javascript change height of container DIV

Flash jumps down, when you change(make bigger) the height of contaner DIV.
I've narrowed the problem down to the simple code
<div id="layer" style="width:700px; height:45px;" onclick="
this.style.height='225px' ">
<embed src="test.swf" wmode="transparent" width="100%"
height="100%"></embed>
</div>
No matter what SWF file is used, if you click on the flash(DIV) the
javascript will change the height of the DIV and the flash will jump
down.
The quick fix is to remove the wmode="transparent", but if I need the transparency I cannot do that.
Example - http://f-source.com/firefox4_flash_bug/

You need to add 'px' to the height:
<pre><nowiki>function resize() {
height = document.documentElement.clientHeight;
imgheight = Math.round((height / refheight) * 530);
document.getElementById('Image1').style.height = imgheight+'px'; //background height
setTimeout("resize()", resize_delay);
}</nowiki></pre>

Dynamically adjust table row height based on data in column

Hi all,
I'm using JDeveloper 11.1.1.5.0 and have a requirement for a table to adjust the height of its rows depending on the data in the columns. One of the columns in the table is a rich text description field and I have the 'rows' property set to 13. This field could have twenty lines of text/images or just one. The users would like the page to show all twenty lines of text without having to scroll but the table has the same height for all the rows (that I set to 13) and provides a scroll bar when the data exceeds this size. My users do not like to scroll, and want the height of each row to be determined by the data in it. I looked at a few options and also did a search online, but was unable to find anything to fulfill this requirement. Do you know of how I could change the height of each row in the table so that it fits the data that it holds?
I have an example of my table at: <b>Table with Set Row Height</b>
As you see, the picture has to be scrolled so that the whole picture is visible. The user requirement is to adjust the row height to show the full picture. Ideally the next two rows would shrink, but that would be a nice to have.
Thanks in advance for any pointers or help.

Hi Frank,
Thank you for replying to my question, I truly appreciate your help.
I tried to use the autoHeightRows to adjust the height of my rows but was unsuccessful. If I understand the autoHeightRows property correctly, this is used for setting the height of the whole table. If this is incorrect and it can be used for setting the height of individual rows in the table, please correct me. I have the 'Rows' property of the richTextEditor set to 13 and this is the height that I would like to make dynamic based on the data.
My users requirement is for the height to be big enough for the data in each row of the table (the table has a description column and the height of each row should be determined by the data contained in it). I updated my <u><b>Screen Shot</b></u> to show the desired layout and what is currently being generated though ADF (http://www.flickr.com/photos/87583386@N05/) .
I have three rows in the example (in actuality these are around 50) and the text in each row can vary. The users would like to see the full text/image in each row without having to scroll each row. Currently my table is within Panel Box, which is inside a PanelGroupLayout-Scroll which is in a PanelStretchLayout. I tried to put the table by itself with the autoHeightRow modifications you suggested but thsi did not help either. I am using JDeveloper 11.1.1.6.
Is this possible with an ADF Table? If it is, is the autoHeight property the only one that I am setting incorrectly? If not, is there another component I can use to get the desired functionality? My users are very strict about this requirement and will not accept the application without this.
Thanks,

I'm no longer getting Allow and Remember prompt. I have to manually click the red icon in the upper left to access it. How do I restore the automatic prompt?

Yesterday I visited a site to which I often go, pingtest.net. Normally, when I visit that site, a thin horizontal bar appears at the top of the browser viewing frame. I do not recall what it says, but it stretches the entire length of frame, from left to right. On the right edge of the bar is an x, if I wish to close it. In addition, when this horizontal bar appears, I also get a box which is about six to seven times the height of the thin horizontal bar that appears over the left edge of the thin horizontal bar. This box stretches across the width of about a sixth or fifth of the width of the horizontal bar. It contains something like the following: Show All, Allow, Allow and Remember. I normally click the Show all option, and I normally select Allow Now for all options.
Here's what happened yesterday: I went to pingtest.net, the horizontal bar appeared, and everything seemed normal. However I took no action. Instead, I changed my mind and decided to go to a different URL. My cursor was in the middle of the screen. I moved the cursor up to what I intended to be the URL field, in order to enter a new URL. Unfortunately I didn't move the cursor sufficiently. So, instead of clicking in the URL field, I clicked right in the middle of the horizontal bar. I HAVE NO IDEA WHAT I CLICKED BUT FROM THAT MOMENT TO THIS THAT HORIZONTAL BAR HAS NEVER RE-APPEARED. WHATEVER I CLICKED, IT APPEARS I INSTRUCTED FIREFOX TO NEVER PROVIDE ME WITH THAT HORIZONTAL BAR AGAIN!!!
As a result, I am also no longer getting the grey box with the Show All, Allow, Allow and Remember options.
How can I restore normal behavior, and get the normal horizontal bar and the normal box with the Show All, Allow, Allow and Remember options?

We had another thread recently where the user clicked "Continue Blocking" and thereafter, Firefox never showed the infobar. I posted a way to clear the block so that the infobar would display once again. It's a little involved, but if it's going to keep driving you crazy, see: [https://support.mozilla.org/questions/1011980 reset plugin behavior].

Why can't I reduce the height of my container box in the Lightbox Display composition widget?

I'm using the Lightbox Display composition widget, I would like to place my trigger at the bottom of my lightbox, I've reduced the height of my image frame but the container box cannot be reduced accordingly. I need to reduce the height of the container box or my triggers will be hidden behind the box. Please advice, thank you.

Hi,
When you insert the light box display, by default it has 3 slides with different components like trigger, container, target, image frame, text box, next button, preview button. You have to change the dimensions for all components for these default 3 images one by one.
Or you can delete 2 of the triggers (that will resul in deleting all of their components from the widget), then you are left with only one image and its components. Later, you can add more images to lightbox display.
Resize the components as per following video:
http://gauravr183.businesscatalyst.com/images/2013-09-26_1440.swf
The steps are, after you have added the widget on the page:
Delete the triggers.
Then select Image frame, resize it. Move close button near it (the 'X' button), resize the text box,resize next and previous buttons and move all of these near the image frame.
Then click on the image frame, till you get "Target" area selected, resize target area and container will be resized automatically.
Regards,
Gaurav Aggarwal

Keep footer div at the bottom of the page

ok, really simple im sure, il i want to do is keep a div at the bottom of the page.. not the browser window so it can always be seen, but at the bottom of all the content, what information would i apply to this div? ive tried top;100% minus the height of the div, no luck, any help would be great thanks.

Try something like this:
First define your html code like this:
<div id="container">
     <div id="content">
          <h1>Content</h1>
          <p>Please resize the browser window to see how your 100% CSS footer behaves. </p>
          <p>Some more text here</p>
     </div>
     <div id="footer">
          <h1>Footer</h1>
     </div>
</div>
Next create your CSS like this:
<style type="text/css">
          
          </style>
This is all there is to it in a nutshell. It can be modified to work in old browsers but that is another question.

Tabbed panel with adjustable/variable height based on content

Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

Height of the containers in split container

Hi, I'm trying to split the container into 3 containers i.e. cont1, cont2, cont3. code is as follows.
Could anyone please help me how to set the height for the containers cont1, cont2, cont3. Thanks in advance.
DATA: split_cont_ob   TYPE REF TO cl_gui_splitter_container, " Splitter Object
            cont1           TYPE REF TO cl_gui_container,          " Container Object
            cont2           TYPE REF TO cl_gui_container,          " Container Object
            cont3           TYPE REF TO cl_gui_container,          " Container Object
           cust_cont_ob        TYPE REF TO cl_gui_custom_container.
IF cust_cont_ob IS INITIAL.
    CREATE OBJECT cust_cont_ob
      EXPORTING
        container_name              = 'CUST_CONT'
      EXCEPTIONS
        cntl_error                  = 1
        cntl_system_error           = 2
        create_error                = 3
        lifetime_error              = 4
        lifetime_dynpro_dynpro_link = 5
        OTHERS                      = 6.
    IF sy-subrc <> 0.
      MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
                 WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
    ENDIF.
    CREATE OBJECT split_cont_ob
      EXPORTING
        parent            = cust_cont_ob
        rows              = 3
        columns           = 1
      EXCEPTIONS
        cntl_error        = 1
        cntl_system_error = 2
        OTHERS            = 3.
    IF sy-subrc <> 0.
      MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
                 WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
    ENDIF.
    CALL METHOD split_cont_ob->get_container
      EXPORTING
        row       = 1
        column    = 1
      RECEIVING
        container = cont1.
    CALL METHOD split_cont_ob->get_container
      EXPORTING
        row       = 2
        column    = 1
      RECEIVING
        container = cont2.
    CALL METHOD split_cont_ob->get_container
      EXPORTING
        row       = 3
        column    = 1
      RECEIVING
        container = cont3.
ENDIF.

Sorry I was not precise enought. For height of particular container you should be using this
"first set type of splitter bar
    CALL METHOD SPLIT_CONT_OB->SET_ROW_SASH
      EXPORTING
        ID    = 1                                    "first conatiner (actually splitter bar)
        type = cl_gui_splitter_container=>type_movable
        value = cl_gui_splitter_container=>false.
"now set its value in % of entire costum control (so here first container will occupy 80% of enitre custom control space).
    SPLIT_CONT_OB->set_row_height( id = 1 height = 80 ).
As for the second question with toolbar: I believe this is not possible. All buttons in SAP are of size directly used. So only the size needed for fitting icon + text will be used. There is no option to widen this.
Regards
Marcin

Getting a wrapper container div to adjust to the height of the content within it.

Similar Messages

Maybe you are looking for