Creating div container in DOJO - dojo

I want to create the DIV container and format the container with shadow, and other nice look and feel. Because the page will have multiple containers and each will have the different data. I want to do that with DOJO, which component is most suitable for that?

As I understand you, you want to create a div element and style it. Then you should look into dojo/dom-construct and dojo/dom-style

Related

How to modify custom.css styling on Docusaurus items

I am looking for the syntax needed to reference an item in Docusaurus allowing me to modify the background color/text color of a collapsed item.
Example image
enter image description here
How exactly can I reference docusaurus code to modify the coloring of these bubbles?
it is not clear what exactly you are asking.
You can find how to add styling and layout here: https://docusaurus.io/docs/styling-layout
You can create custom react components and add them to the documentation to completely customise the html element. Alternatively you could inspect the element to find the class used by docusaurus to change the css of the elements you want.

Is there a way to make wrapper div/container to group CMS components in slots?

By design we have visually grouped CMS components on multiple pages. We need some kind of wrapper div or a container around specific component groups to add CSS to it and make them visually appear like one entity. We have tried with styling the slots, but this is by no means a good solution. Do you have any suggestions how we could achieve this?
I can think of various ways, they all have PROs/CONs and limitations. You could combine those strategies as well to have an optimised mix.
The easiest way to implement this is by using standard CSS selectors. There are various selectors that could be used, such as sibling selectors, last-of-type selector.
Changing the CMS structure to fit the grouping, by using a specific slot for the components. With this approach you can influence the layout by using the pageslot position based CSS selector. The disadvantage here is the the page slot is less flexible and cannot contain additional components that you don't like to be part of the "group".
You could combine components in a so-called container component; container components have a list of embedded components. The advantage is that the container component can have non-grouped component siblings, which can be rendered in a different way.
the last resort would be a rewrite of the page layout / page slot component in Spartacus, and conditionally add specific DOM. This is a lower level change and is causing more work and will derail you from the standard implementation.
Hope this will give you some ideas, if not, you should provide more details.

How to implement drag drop of html elements in VueJs

If I would like to implement drag drop similar to JQuery with vuejs how would I do that ? How to move the elements in the DOM ?
I don't want to use a plugin I want to understand how to do it.
Thanks.
When you start to drag a node save a reference of that node.
When you drop that node use that reference.
Make container draggable.

Is there an option to change the width from the grid container in bootstrap theme?

Is there a way to change the width from the grid container in bootstrap theme using IP or should i hack the CSS style sheet?
Can't understand why would you need this. Do you want to have GRID management narrower? Then add your own css file.
CSS can be added using ipAddCss function in ipBeforeController event.
You can add CSS only for particular admin pages. Use ipRoute()->... to get information about current page.

Dijit vertical layout

I need to create a list of buttons inside a ContentPane (one under the other) as a "single column vertical grid". I did not found such a layout widget in dijit ref. guide.
What can I use? How can I get a new line when adding (addChild) elements to a content pane?
There's dojox grid container but looks overkill to me.
i know that this is the least elegant way to do it but it is one-of-a-kind: you could create a custom div-domNode containing your buttons just like this:
var btn1=new dijit.form.Button({...});
var btn2=new dijit.form.Button({...});
// custom div-domNode
var buttons = dojo.create('div');
// filling it with the domNodes of your buttons separated by a <br> node
dojo.create(btn1.domNode,null,listOfButtons);
dojo.create('br',null,listOfButtons);
dojo.create(btn2.domNode,null,listOfButtons);
and display it in you ContentPane
myContentPane.set('content', buttons);
A ul or a table would work as well.
Finally let me say that im very ashamed of myself for not knowing any better answer.
Hope its what you asked for.