I'd like to make the dialog(https://vuetifyjs.com/en/components/dialogs/) fill x% width and x% height of the screen. setting the width=80% does work as expected, the height does nothing though. any idea how to do this?
You need to set the height for the component inside the dialog. For eg, if you are using v-card, inside v-dialog then set the height of v-card. v-dialog will then scale accordingly.
<v-dialog
v-model="dialog"
width="50%"
>
<v-card height="50vh">
//Card contents
</v-card>
</v-dialog>
Related
I control the size of my image in a page by CSS imgType.
<img class="imgType" style="..." src="/image1.jpg" alt="..." />
If I edit the image to change its name only (the fields width & height stay empty and save the content of the editor, tiny writes a value for both the width and height.
<img class="imgType" style="..." src="/image2.jpg" alt="..." width="249" height="145" />
I tried to use object_resizing : false, but it does not do anything.
How can I stop tiny to write these values?
You can remove the image dimensions from the Insert/Edit Image dialog with:
image_dimensions: false
Docs:
https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions
I create a card with some items inside but i cannot change the width of the v-list-items.
When two v-list-items are on same line the length is 50% for each and i need that the left one be wider.
I made one codepen to show my problem (maybe the problem is how i create the items).
If the left item is wider the ellipsis in the text (long text but not so much as for ellipsis) is not necessary.
CodePen
<v-list-item-content class="pt-0">
<v-list-item-title>long text but not so much as for ellipsis</v-list-item-title>
<v-list-item-subtitle>Today</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-content class="pt-0">
<v-list-item-title align="right" class="font-weight-light display-2">180</v-list-item-title>
<v-list-item-subtitle align="right"> </v-list-item-subtitle>
</v-list-item-content>
You can put your <v-list-item-content> inside a <div class="myDiv"> for example and set your desired width or other styles to that class.
I have a tree width d3.js. when tree overflows svg, it is hidden and I can view hidden parts by panning on tree. is there any way to add scrollbar for view hidden parts instead of panning?
for example in this sample http://bl.ocks.org/robschmuecker/7880033 I want to add scroll bar to this tree. this sample is not what I want: https://bl.ocks.org/CrandellWS/ca7e6626c9e6b1413963
because in this example when we collapse nodes, scrollbar size not change.
You can get the svg bounding box using svg.getBBox(), where svg is your svg node, e.g.
let svg = document.getElementsByTagName("svg")[0];
let box = svg.getBBox()
and then use box.x, .y, .width and .height to calculate the correct viewBox attribute value, width and height.
I've got an SVG that is being drawn inside of a div that has css of display:none. I need to center some of the rendered text elements, and to do this, I need the height and width. Unfortunately, when the containing html element is set to display:none, I always get 0 for height, and width. getBBox(), clientWidth, getComputedTextLength() methods all return zero. My question is: how can text width be calculated under these conditions?
e.g.
<div style='display:none;'>
<svg><g><text>some text</text></g></svg>
</div>
Have you tried setting the <div> to visibility: hidden;?
You may also want to make it position: absolute; so it doesn't affect the layout of other items on the page.
on this page it says you can set the width and height of each slide:
http://jquery.malsup.com/cycle2/demo/carousel.php
carousel-slide-dimension = The width (horz carousel) or height (vert carousel) of each slide. If this option is not set the value will be inferred from the first slide's dimensions.
but how do I exactly add it to the code? It's not clear:
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
>
<img src="http://malsup.github.com/images/beach1.jpg">
<img src="http://malsup.github.com/images/beach2.jpg">
...
<img src="http://malsup.github.com/images/beach9.jpg">
</div>
All the attributes with cycle2 are preceded by "data-cycle-" so for carousel-slide-dimension, you simply add that like so:
data-cycle-carousel-slide-dimension=300
in your slideshow div (and whatever dimension).
Hope this helps!