I've implemented a kanban board with react-beautiful-dnd. It works the way I want.
I would like to be able to use this board inside a div container that has overflow: hidden. However, doing so prevents from dragging Cards in columns that are outside of the viewport, the screen does not scroll horizontally to the right anymore.
I'm simplifying the issue, the reason I need this is because I'm using a Layout component which content component is a div with overflow: hidden.
Here is a codesandbox that demo the issue
Basically, this works, I can drag-drop Card to the right and it will scroll horizontally :
<div style={{ overflow: 'unset}} >
<Kanban />
<div>
This does not:
<div style={{ overflow: 'hidden }} >
<Kanban />
<div>
Maybe there is a way to reset the first div as such?:
<div style={{ overflow: 'hidden }} >
<div style={{ }}> // something here to reset container div?
<Kanban />
</div>
<div>
Related
I nested a bunch of mapped img elements within a div and set the div's overflow-x to scroll.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<img
id={movie?.id}
key={i}
className='w-[60] h-[60] object-contain'
src={props?.preImg + movie?.poster_path}
/>
))}
</div>
As expected, when I run this code, any img element that flows outside the barrier of the parent div's width is only visible when I scroll along the x-axis.
However, when I try to nest those img elements inside of another div, the behavior changes.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<div className='w-60 h-60'>
<img
id={movie?.id}
key={i}
className='w-full h-full object-contain'
src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
Instead of maintaining the same results, content that flows out of the main parent div element is visible by default. So, you can say it's as if it breaks out of the barrier of the parent div element and is visible when I scroll on any part of the body of the page, not just when I scroll on the parent container div.
How can I get the second code block to behave like my initial example and have the content become visible only when I scroll on the parent div container?
One way to fix this would be to give each <div> in your flexbox the utility class flex-shrink-0, which will preserve the size of each container.
<div className="w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none">
{props?.categoryMovies?.map((movie, i)=> (
<div className="w-60 h-60 flex-shrink-0">
<img id="{movie?.id}" key="{i}" className="w-full h-full object-contain" src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
You can see it working here: https://play.tailwindcss.com/KoEroV1coQ
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.
I have a 3rd party component which is using display:flex. It behaves correctly in terms of it's top position, but I want the bottom of the component fixed to the bottom of the browser window.
https://codesandbox.io/s/18ox21zqm4
const App = () => (
<div>
<Menu fixed="top" inverted>
<Container>
<Menu.Item as="a" header>
Navbar
</Menu.Item>
<Menu.Item as="a">Home</Menu.Item>
</Container>
</Menu>
<div style={{ position: "fixed", top: "100px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>
</div>
);
render(<App />, document.getElementById("root"));
I have tried putting the component in a div with it's top and bottom fixed, using a ref of this div to get the height and derive what the height of the flex component should be, but the height from the ref does not update with window resize, only on browser reload.
How can I go about achieving my goal?
We can do something like this but this is usually not a good coding practice (don't have enough reputation yet to comment)
<Segment style={{ backgroundColor: "red", height: "100vh" }}>
The actual HTML output is:
<div style="position: fixed; top: 100px; bottom: 0px;">
...
<div class="ui segment" style="background-color: red;">
<div class="ui grid" style="height: 100%;">This 3rd party component which uses display:flex should have top just below above component, bottom fixed to browser window bottom (scales with window resize).</div>
</div>
</div>
Since your <div class="ui segment"> has no height, giving <div class="ui grid"> a height of 100% isn't doing anything, since it's just 100% of the parent. You need to add your height: 100% to the <div class="ui segment"> aka <Segment />, so that it can fill the space set by the hight of the wrapping div.
<div style={{ position: "fixed", top: "100px", bottom: "0px" }}>
<Header as="h1">Dynamic Height Content</Header>
<TextArea placeholder="This container height may grow or shrink based on content." />
<Segment style={{ backgroundColor: "red", height: "100%" }}>
<Grid>
This 3rd party component which uses display:flex should have top just
below above component, bottom fixed to browser window bottom (scales
with window resize).
</Grid>
</Segment>
</div>
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
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.