Is it possible to draw line between the container and a draggable element during dragging using 'dragula' lib? When the element is dropped, the line should disappear.
<div [dragula]='"my-bag"'>
<div class="draggable-item">
<div class="my-drag-indicator">
// style your line here
</div>
<div class="my-drag-content">
// your content here
</div>
</div>
</div>
while dragging, you will have a clone image of your item, dragula will add 'gu-transit' class to it.
As the structure above, you can style your .draggable-item.gu-transit to hide the '.my-drag-content' and show the 'my-drag-indicator'
Related
I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!
I am attempting to modify the Dark Nav with White Page Header template in TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874). I wish to add a background color to the template. To do this, I attempted to add class="bg-amber-300" to the top-level div:
<div class="bg-amber-300 min-h-full">
///
</div>
...but that did not work. I also tried adding a color class to the main tags further down in the template:
<main class="bg-amber-300">
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
<!-- /End replace -->
</div>
</main>
But that also did not work. In both cases there is still a large white gap at the bottom of the view. How can I add background color so that the entire view below the nav bar is filled?
I think it's working as it should because min-h-full means to take the full height which is specified in the content section as h-96
if you want to get rid of the white space give the top-level div this class
min-h-screen bg-amber-300
https://play.tailwindcss.com/fGw3zeIf4n
Have code like this in vue.js ,my agenda is to make the modal movable from one end to other end, here is my code,have used bootstrap modal for this purpose and have included : draggable
<b-modal ref="my-modal" hide-footer title="Edit Record">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="">Viz Attributes</div>
</div>
<div class="card-body">
</div>
</div>
</b-modal>
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 modal to draggable.
I suggest to you use Vue.js modal component DEMO: www.vue-js-modal.yev.io
install: www.npmjs.com/package/vue-js-modal
<modal name="bar" draggable=".window-header">
<div class="window-header">DRAG ME HERE</div>
<div>
Hello!
</div>
</modal>
Draggable property can accept not only Boolean but also String parameters.
using dijit/Toolbar always renders horizontal toolbars. I need it to be vertical.
<div id="toolbar1" data-dojo-type="dijit/Toolbar"
><div data-dojo-type="dijit/form/Button" id="toolbar1.cut"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', showLabel:false">Cut</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.copy"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.paste"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div
><!-- The following adds a line between toolbar sections
--><span data-dojo-type="dijit/ToolbarSeparator"></span
><div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
thanks
Dojo's toolbar can't really be made vertical but what you can do is create a dijit/Menu and not setting it to be hidden by default.
Something like this should work:
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'">Cut</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy'">Copy</div>
</div>
If you want to do this programmatically, it also works. Just don't specify a targetNodeId and give the widget a node (or id) when creating it.
Also, you can modify the MenuItem css to look like a standard button (border radius, box shadows, etc) if you would like but most vertical menus I've seen with buttons end up using a more flattened style button.
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.