Remove weird padding/margin on v-image-input - vue.js

I am using the external component v-image-input in Vuetify. For some reason, the component creates this extra padding/margin on the right and bottom side. I have been unable to find any attribute that can change this. Any ideas?

There are some hidden elements in the HTML.
If you go to https://seregpie.github.io/VuetifyImageInput/ and click on 'hide actions' the elements disappear.

Related

How to add div next to <ul> in bootstrap-vue dropdown-toggle?

I am using bootstrap-vue library, and I am using component to generate dropdown. However i need to add additional button. This button need to be located right after in DOM, but i have not found a way how to make it possible. If i write this button just inside component, it is not generated at all, and if i write button outside of , it is not generated after . Is there any way to generate my button right after by using v-slot or something else?

$vuetify.rtl=true moves only the content inside the component to right but it doesn't work to replace the component to right?

https://moeddami.github.io/nuxt-material-admin-demo/dashboard/
In the above link i want the sidebar component towards right when $vuetify.rtl is enabled.

Modals inside sub-routes

I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.

Nested tabs display in bootstrap 3

I'm trying to include several tabs into an existing tab, it works but I have a display problem when I try to display the tab containing the nested tabs.
When I click on it, the content of all the children tabs are displayed instead of the first tab only.
Here is a link to check the problem:
http://www.bootply.com/3hWg0EDCmx
I can't find where I'm wrong.
Thanks
You have the wrong css class assigned to tab-memory and tab-activity. 'tab-io' should have the class "tab-pane fade in active", while the rest should have "tab-pane fade in".
Here is the link to the working code: http://www.bootply.com/3hWg0EDCmx#

How to highlight a specific tree node in xpage programmatically?

I have a dijit.tree in xpage. I want to select a specific tree node when the page is rendered.
In dojo reference guide,There is a example contains workaround code for this problem, as well as an example call to tree.attr('path') if you already know the full path to the tree node you want to highlight. But i want to highlight the node automaticlly when the page is rendered.
What's the more idiomatic way of doing this? Thanks a lot!
You can add a XSP.addOnload(function(){....}) call in an Outputscript element to render the highlight.