I want to assign height to parent div based on the child content (here SVG is my child which can have different content based on data). If I assign fixed height either to parent or the child, it gives issue when content changes. It works fine for the width (automatically alter div width based on content) but not for height. Here is my code snippet.
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
if (colorLegend) {
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px")
.call(colorLegend);
}
}
return (
<div style={{position: "absolute",right: 16,top:
10,backgroundColor: "black",borderRadius: "5px",padding:
"10px"}}>
<label style={{ color: "#6F6F6F" }}>
{name}
</label>
<div id="legend"></div>
</div>
);
Fiddle link: https://jsfiddle.net/1sv3Lwar/
I think the reason your parent <div> isn't "growing" vertically is because you are using:
position: "absolute"
Using absolute positioning or floats will cause this.
Although, assuming you need the absolute positioning, so adding: overflow: hidden should do the trick.
Related
I am trying to display my projects on my website and want a description to appear when the image is havered over. I can get the text to appear on hover but it covers the whole div which is wider than the image. I want the text to match the image width and not the container.
Heres my JSX- added the mapping for context but my question pertains to whats between the component:
{content.map((item, id) => (
<div key={id} className='border'>
<p className='projectTitle'>{item}</p>
{url[item][2] !== ''
? (<div className='center' onMouseEnter={() => onHover(item)} onMouseLeave={onLeave}>
<figure className='center'>
<img src={url[item][2]} alt={item} className='portfolioIcon center'/>
{hover === item
? <p className="textOver" onMouseEnter={() => onHover(item)}>{url[item][3]}</p>
: null }
</figure>
<br />
</div>)
Here's the CSS- I can cheat a bit by defining the text width to 25vw but not all images are the same width and so it still doesn't match the width properly on all images. I would like a way to set the width to be that of the underlying image.
.textOver {
position: absolute;
background-color: rgba(0,0,0,0.6);
width: 25vw;
}
.portfolioIcon {
height: 25vh;
width: auto;
}
I also have the items displayed in a grid format so I want the 25vh constant with auto image widths and so I cant simply set the width to be constant.
In my app (using bootstrap 5.1 with react-bootstrap v2) I have a parent div to which I applied the style max-height:100vh; and d-flex flex-column classes. This parent div has 2 children:
A div containing a navbar;
A div with class container-fluid and flex-grow-1
Now if I apply the style overflow:'auto'; at the container div it will become scrollable.
My goal is to be able to build components that can expand their height automatically without causing parent div to overflow and scroll themselves instead.
In the previous scenario I added max-height:100vh; and got a fixed parent height but I can't use this workaround in order to create such desired components.
I already tried setting height to 100% but it caused the parent element to overflow.
I made a simple codesandbox example with what I tried so far. Consider as target to get column 1 scrollable without scrolling other divs
If I understand what you are trying to accomplish, you would like the Container element to stay at a static height based on viewport height and have components or divs that scroll within that constraint? If so I think this should work:
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { Container } from "react-bootstrap";
import Navigator from "./Navigator";
import Content from "./Content";
export default function App() {
return (
<div className="d-flex flex-column w-100" >
<div>
<Navigator />
</div>
<div>
<Container fluid>
<div className="d-flex" style={{ height: "85vh" }}>
<div className="px-2" style={{ overflow: "auto" }}>
<h5>column 1</h5>
<Content number={15} style={{ width: 200 }}>
<p>.....................</p>
</Content>
</div>
<div>
<h5>column 2</h5>
<Content numeber={3} style={{ width: 200 }}>
<p>-----------</p>
</Content>
</div>
</div>
</Container>
</div>
<div>
<Navigator />
</div>
</div>
);
}
I used 85vh for the "d-flex" div height as an example as I don't know what height you have provided for the Navigator elements. The result is a static container height with column 1 scrolling instead of expanding the height of the containing div. If you don't have a set height for the navigator elements but still want the viewport to display all elements without scrolling you will need to use useEffect to query the height of those elements, post paint, and do a calculation based on viewport height to output the correct height for the container element.
Using Aurelia, I created a very simple component with HTML:
<template>
<h1
draggable="true"
css="width: ${width}px;
height: ${height}px;
color:${color};
left: ${left}">
${message}
</h1>
</template>
And TypeScript:
export class Navigation {
message: string = 'Component Text';
width = '400'
height = '250'
color = 'red'
left = '100'
}
All the CSS attributes works as expected, except the left: 100px
The objective is to use the top and left to dynamically set the position of the component. This is also the reason for the draggable="true" attribute.
I can see in the rendered HTML the left: 100px is present but has no effect.
Am I doing something wrong?
Position CSS property should be set to 'relative' or 'absolute' in order to get it working: http://www.w3schools.com/cssref/pr_pos_left.asp
I have an example on http://jsfiddle.net/SsYwH/
In case it don't work
HTML:
<div class="container">
<div class="absolute">
Testing absolute<br />
Even more testing absolute<br />
</div>
A little test<br />
</div>
CSS:
.container {
background: green;
}
.absolute {
position: absolute;
background: red;
}
Problem
I use jQuery to create a slider-effect. To do that I need to set position absolute.
The red block in my code is the position absolute slider.
The green block is the container.
I still want the container to be set by it's childs height. Now it don't know it because of the position absolute. Solution?
Absolutely positioned elements do not count towards the container's contents in terms of flow and sizing. Once you position something absolutely, it will be as if it didn't exist as far as the container's concerned, so there's no way for the container to "get information" from the child through CSS.
If you must allow for your scroller to have a height determined by its child elements without Javascript, your only choice may be to use relative positioning.
Then you'll also need to use jQuery to fix the height of the container div. Like so:
http://jsfiddle.net/khalifah/SsYwH/24/
$( document ).ready(function() {
$( ".container" ).each(function() {
var newHeight = 0, $this = $( this );
$.each( $this.children(), function() {
newHeight += $( this ).height();
});
$this.height( newHeight );
});
});
This is wrong however, since an absolute positioned element can sit outside of it's container. What you really what is something that will find the bottom of the element that sits lowest in the containing div, with respect to the view.
jQuery('.container > .absolute').each(function() {
jQuery(this).parent().height('+=' + jQuery(this).height());
jQuery(this).css('position', 'absolute');
});
.container {
background: green;
position: relative;
}
.absolute {
position: absolute;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
Yo
</div>
This should do what you are wanting. Note that this assumes that the absolutely positioned element must be an immediate child.
Also note that you remove the '+=' + in the height function if you want the parent element to have 100% height of it's child element.
http://jsfiddle.net/SsYwH/21/
You can do something like this with jquery. Call ghoape(jqueryElement).
var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
var max_y = 0;
$.each( $(element).find('*'), function(idx, desc){
max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );
});
return max_y - $(element).offset().top;
}
This will go through all the descendants and find the max height and return the difference between the childs.offset() + its height and then subtract that from the elements offset.
I have code as below div is draggable and Resizable using JQuery.I want the inner textare to be resized automatically based on resized div.With code below it works fine for width but it does not acquire full height of div .
<div class="dragDiv" id="dragDiv"> <textarea style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
<br/><input type="submit" value="Mark" onclick="MarkImage()" />
</div>
Everything below the jQuery resizable div needs to have height set to -something- in CSS (or absolute positioning with top and bottom both set). e.g.:
<div class="Resizable">
<div style="height:100%">
<div style="height:100%">
<textarea></textarea>
</div>
</div>
</div>
quick demo: http://jsfiddle.net/cwolves/KkNRb/
height: 100% works only if parent has a fixed height defined in style or css.
Here, you need to calculate height with scripts and update it when parent div resizes.
You can use attribute alsoResize of JQueryUI's resizable. In my case the following code worked perfectly:
var box=$('#dragDiv');
box.resizable({alsoResize: box.find('textarea').css('resize', 'none'),
minHeight: '200',
minWidth: '400'});
Also I've disabled browser built-in resizing of texarea to prevent it from getting out of the parent div.