[EASY] Help for embedding a CodePen CSS

[EASY] Help for embedding a CodePen CSS
0
#1

Hello,

The solution to my problem is surely extremely simple and it is all the more annoying.

I’m just trying to put a CodePen (small template) in a container but it is capricious and does not appear. One of the comments (CSS) of the code specifies that it is necessary to attribute a size and a height to the object under pain of not seeing it appearing and in spite of that I do not see the error.

CodePen : httpsXclearXthisXpartX://codepen.io/fabianmossberg/pen/yZMxzP
my container :

body{
	margin:0;
	padding: 0;
}

.container-wrap{
			width: 100vw;
			height:100vh;
			margin:0 auto;
			position: relative;
			background: url("../res/img/map_01.2.png") no-repeat center center;
			background-size: cover;
	overflow: hidden;
		}

And here is the CSS that I have to adapt to make the whole thing work:
(With translated comments ^^)

/* This style can only be applied to this demo, For reference only, Customizable by design or preference */

html,body{ height: 100%; }

body { background: #20262E;
overflow: hidden; 
}

#app{
  overflow-x:hidden;
}

/* Direct script reference suggestions are added, otherwise it would cause flickering, a single file component does not need */

[v-cloak] { display: none; }

/* Warning! The width and height of the component must be defined, otherwise it will not come out!!! */

#app .vue-tinder {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 23px;
  margin: auto;
  width: calc(100% - 20px);
  height: calc(100% - 23px - 18%);
  min-width: 300px;
  max-width: 355px;
}

/* The position of the three status indicators on the map, the transparency will be automatically adjusted by the component */

.nope-pointer { right: 10px; }
.like-pointer { left: 10px; }
.nope-pointer,
.like-pointer {
  position: absolute;
  z-index: 1;
  top: 20px;
  width: 64px;
  height: 64px;
}
.super-pointer {
  position: absolute;
  z-index: 1;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
  width: 112px;
  height: 78px;
}

/* Style d'image de fente */
.pic {
  width: 100%;
  height: 100%;
  background-size: cover;
}

/* Style de bouton */
.btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  max-width: 355px;
}
.btns img{ width: 80px; }

I also add HTML and JS in case :

HTML

<div id="app" v-cloak>
  <tinder
	ref="tinder"
	:queue.sync="queue"
	@submit="submit">
	<template slot-scope="{data}">
	  <div
		class="pic"
		:style="`background-image:url(https://picsum.photos/710/1152/?random=${data.key})`">
	  </div>
	</template>
	<img class="like-pointer" slot="like" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png">
	<img class="nope-pointer" slot="nope" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png">
	<img class="super-pointer" slot="super" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-txt.png">
  </tinder>
  <div class="btns">
	<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope.png" @click="decide('nope')">
	<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-like.png" @click="decide('super')">
	<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like.png" @click="decide('like')">
  </div>
</div>```

JS
```new Vue({
  el: "#app",
  data: {
	queue: []
  },
  created () {
	this.getData()
  },
  methods: {
	/**
	 * 用于产生demo用的数据
	 * @method getData
	 */
	getData () {
	  const list = []
	  for (let i = 0; i < 5; i++) {
		list.push({
		  key: Math.random()
		})
	  }
	  this.queue = this.queue.concat(list)
	},
	/**
	 * 点击按钮所绑定的方法,此方法为调用vue-tinder组件内方法的示例,仅供参考
	 * @method submit
	 * @param  {String} choice
	 */
	decide (choice) {
	  this.$refs.tinder.decide(choice)
	},
	/**
	 * 自定义事件submit绑定的方法,移除卡片的回调
	 * @method submit
	 * @param  {Object} choice {type,key}
	 */
	submit (choice) {
	  switch (choice) {
		case 'nope': // 左滑
		  break;
		case 'like': // 右滑
		  break;
		case 'super': // 上滑
		  break;
	  }
	  if (this.queue.length < 2) {
		this.getData()
	  }
	}
  }
})```
#2

Here is some documentation on what I think you’re trying to do if I read your post correctly?

#3

I would like to integrate this piece of code in a container, but it does not appear.

#4

I would like to integrate the codepen creation and not the demonstration.