I'm using bootstrap-vue modals in a project and wan't them to be draggable.
I googled for this, but I'm fairly new to webdevelopment so I'm a bit overwelmed with the solutions for bootstrap without vue.
I think example-code is not necessary as I'm using standard bootstrap-vue modals. Tell me if i'm wrong.
Could you provide some examples for bootsrap-vue or explain how to use the bootstrap-only solutions?
Thanks
BootstrapVue <b-modal> uses Bootstrap v4.x CSS/SCSS styling to position the modals.
The styling uses absolute positioning for the viewport, and auto-left/right margins to center the modal horizontally and a top margin to position the modal partially down from the top of the page.
So unfortunately, out of the box, you can't position them absolutely in the viewport.
You would need to change the positioning of the modal dialog sub-container to absolute and control the left/top position based on dragging. This is not an overly easy task. You would need to create your own header (using the scoped slot for the header), and add event listeners for click/drag and if dragging, then switch the position of the .modal-dialog container to absolute, and then compute the left/top coordinates and used traditional DOM style adjustments to that element.
Related
I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?
I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;
I'm having a unique situation. I need to make a scrollable area that has a custom scrollbar which is slightly padded from the container. At first, I was thinking of adding an additional container that would have the necessary padding to create the illusion that the scrollbar itself has padding, but some elements will have different background color from the additional container and that would make obvious there's another container instead of the scrollbar having padding.
As you can see, the background color of each individual container spills out of the main container past the scrollbar. Is there any way I can add padding to the scrollbar or at least a hack that would give that impression?
Initially, I have found and started using react-custom-scrollbars npm package, but it seemed it had a lot of open issues and I had problems implementing it, so I switched to simplebar package which is very lightweight and works similarly to a facebook custom scrollbar. Solved my issue.
Trying to use html2canvas with some absolute position divs created with Gridstack.
Everything works great with Gridstack, but when I implement html2canvas, every div, or Gridstack item, gets sucked up to the top and stacked upon each other. If I turn of Gridstack and just use Bootstrap or something that doesn't applt position:absolute to each element it works fine.
Is there something I'm missing, or does html2canvas just not support absolute positioned elements?
I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance