imagine we have two components, Modal.vue which is lets say a component that is used to display modal content (uses slots to take in JSX), and Component.vue which is the one with content we wish to test with vitest/jest:
//Modal.vue
<template>
<div>
<slot name="header" />
<slot />
<slot name="footer" />
</div>
</template>
//component.vue
<template>
<Modal>
<template #header>
<h1>Hello world</h1>
</template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<button>Great</button>
</template>
</Modal>
</template>
The problem is that I cannot reach the wrapper HTML within my test, as it will console log something similar to this:
// snipet from the test file
...
it('should mount Component.vue', () => {
console.log(wrapper.html())
expect(wrapper).toBeTruthy()
})
...
The console.log in the test will result to this:
<div>
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
</div>
Question is: How can I access the wrapper HTML that is define in 'Component.vue'??
I'm having trouble understanding why the two chunks of HTML below render differently. The yellow and pink table is missing a BR tag, and flows efficiently, the green and blue table has the <BR> tag in the middle of the text in the blue cell, and has unwanted space in the green cell. I've tried rendering as flex boxes and tables, and they render the same way. I've tried different browsers, and they render the same way.
What rule is being followed in the green and blue layout that causes the whitespace in the green cell?
How can I get rendering like the yellow-and-pink case and use <BR> tags? I'm actually after <P> tags, but let's just talk about <BR> tags, which I figure are the most simple case.
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: green;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="background-color: blue;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
<br/>
<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</td>
</table>
<br/>
</body></html>
Screenshot:
If a height is assigned to a div, the whitespace is not removed (see the darker green below), and if a <br> tag is allowed into a table which has a height on the cell, the whitespace is split between the top and bottom of the cell (see the lighter green below) - but the height attribute doesn't affect the rendering anyway:
This behaviour is exhibited in FireFox 80.0 and Chrome Version 85.0.4183.83
Here's what's going on:
Inside of the div with display: flex; flex-flow: row you have two children, the green and the blue divs.
The browser calculates their individual widths (it's the width because flex-flow: row) as follows:
The calculation of the green div's width is straight forward. It's the width of the whole text on one line.
=> greenWidth
The calculation of the blue div is a little bit more involved because of the <br>. This causes the text to be split in two. The browser then calculates the widths of these two bits of text that they would take on one line each. Then it takes the wider of these.
=> blueWidth
Both, the green and the blue box have their default value for flex-basis which is auto. For the green box, the browser takes greenWidth and for the blue box it takes blueWidth as the result of auto.
I still haven't come up with an actual solution but maybe, based on the above, you might be able to figure something out.
In the flex-box the items are stretched to the height of the container (if height of items is not defined). However, You can change this behaviour by gibing the green div a height.
Suppose the height is 100px;
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: green; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="background-color: blue;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
<br/>
<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</td>
</tr>
</table>
<br/>
</body></html>
Christian pointed in the right direction. Understanding that the problem is down to sizing being affected by tags, I allowed the browser to size the un-tagged content, but hid its rendering.
The "solution" is to have two text bodies, one rendering with tags and the other without. The text without tags is color:transparent; and positioned with normal text flow. The text with tags is rendered on top of the document text flow in the location of the transparent text by using a z-index higher than the normal text. There is a chance that the text with tags will overflow the table, so layout your page with this possibility under consideration (or pad the text without tags a little):
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: #FFA;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position: relative; background-color: #FDD;">
<div style="position: absolute; z-index:2;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div style="color:transparent;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
</div>
</body></html>
I'm using v-dialog from vuetify. When I set it to persistent, there is a bounce effect when the user clicks outside the dialog. I would like to manually create that effect when some random button is clicked. How is that possible?
Dialog has a method called animateClick, you can call the same.
CODEPEN
<v-dialog ref="dialog" v-model="dialog" width="400px">
<v-card >
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</v-card-text>
<v-divider></v-divider>
<v-card-action>
<v-btn #click="doAnimation">Animate Me</v-btn>
</v-card-action>
</v-card>
</v-dialog>
....
....
<script>
export default{
...
methods: {
methods:{
doAnimation(){
this.$refs.dialog.animateClick()
}
}
}
}
</script>
It's possible to create a v-list in vuetify with fixed height and when my user add some content he show a scrollbar in the v-list
tks
What your asking is not entirely clear, but with CSS you can add a scroll bar to a card if its not automatic.
Here is the codepen:
https://codepen.io/AleaQ/pen/WJZqWb
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout>
<v-flex xs6>
<v-card class="scroll" height="100">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
//CSS MARKUP
.scroll {
overflow-y: auto;
}
I've got several questions regarding bootstrap.
Is there a way to make a bootstrap site fixed on a certain view (320px) when resizing it on a pc? how would you go about it? im currently using chrome to test it.
another thing, i have this logo on the navbar, is there a way to insert an image in it and automatically resize it using a css styling rather than making the image smaller on a image editor, also put it infront of the navbar not inside it.
when i resize the website smaller than 200px width, banner image goes smaller and shows the background behind the jumbotron. how can i make the image snuggly fit the top navbar?
Practice Website 1 Bootstrap
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT US</li>
<li>LINKS</li>
<li class="dropdown"> <!-- Dropdown Link Start-->
MEDIA<b class="caret"></b>
<ul class="dropdown-menu">
<li>FACEBOOK</li>
<li>TWITTER</li>
</ul> <!-- Dropdown Link End-->
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div> <!-- Navigational Start Container-->
<div class="jumbotron">
<h1>Success!!!</h1>
Removed Jumbotron Padding and Margin/ still not a success
<div class="container"> <!-- Grid System Content -->
<div class="row">
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 1</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 2</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 3</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit. <a class="btn btn-danger">Read More</a></p>
</div>
</div>
</div>
<!-- Footer Start-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
Subscribe on Youtube
</div> <!-- Footer Start-->
<!-- jquery and javascript start script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script> <!-- JS End Script-->
1) You can set you're rows classes to col-xs-#number where #number is between 1 and 12 depending on how wide the row is. This will mean that you're site is "meant" for mobile/smaller screens, and any desktop/larger screens use of it will have the same styling.
2) You could do:
<img src="/urlpath.jpg" id="images_id" />
and
#images_id {
height: desired_height;
width: desired_width;
}
3) you can give the image a class of 'img-responsive'. Or you can set the image size relative to the navbar width and height and it will shrink as the navbar does.