Why does my div does not recognize the height of custom components inside itself?

210
July 29, 2017, at 09:19 AM

I have a div that has a handful of custom components in it, and I'm trying to put a border around that container, but the container div's height is not affected by it's contents.

This is a mock up of the div

<div style="border: 1px solid black">
    <myCustomComponent1></myCustomComponent1>
    <myCustomComponent2></myCustomComponent2>
    <myCustomComponent3></myCustomComponent3>
</div>

Where myCustomComponent1, 2, and 3 point to different html files that contain varying contents that, for the sake of this example, would make each one be a height of 200px and width of 400px.

So I would expect the div containing these to have a border that is 400px wide, and 600px tall. But instead the border appears only as a narrow box at the top of my elements.

Answer 1

My first guess is that the contained components are floating, thus taken out of the flow of the document. In order to get the container to resize to fit floating children make the container a block formatting context by adding overflow: hidden to the style of the container.

Another option is to set the display on the contained elements to display: block or display: inline-block depending on how they should act.

If this turns out to not be the issue I'll update this answer, but as of now it's hard to say as not enough information is given

Answer 2

In order to upload html files in "myCustomComponents" you can use iframe resizer. Otherwise you cannot control the height, even if you make it 100%.

If the html files that you are trying to upload in the "myCustomComponents" are stored on the same server you can use the iframe resizer https://github.com/davidjbradshaw/iframe-resizer.

Or you can check for how to include html file in other html: https://www.w3schools.com/howto/howto_html_include.asp

Rent Charter Buses Company
READ ALSO
Angular Cards to be the same height in a flex-layout row

Angular Cards to be the same height in a flex-layout row

I have an angular material based uiI am using @material/flex-layout and material cards, so I have a component layout like:

1052
d3js Opacity Transition Not Working as Expected

d3js Opacity Transition Not Working as Expected

I have a group I want to animate form 0 opacity to 1I've animated it from 1 to 0 fine, but going the other way is strange

324
Kendo Window Header Styling Issue in IE

Kendo Window Header Styling Issue in IE

I am using kendo UI 2017 versionBy default for every window to show the header there is padding-top:32px and in header styling I am getting -32px

262