Two Vue2 v-html objects in one html tag

I have two v-html objects loading. One text inside a span tag and one link inside an anchor tag. The text is the cookiebar description and the link is link to the modal with options. I would like both of them to load in the same html tag so I can make them one node for wrapping the block on mobile as one block instead of two.

Background

With current flexbox setup I can only do all in one row or one column using flex-direction. With display block of description and link wrapper and span and a as inline blocks I do get link to wrap party below description as we like, but on desktop or wide screen all gets stacked.

Goal

So trying to make this work by putting both items in one html node. That way on smaler screen sizes the whole descriptionm+link block will fold as one and look like a unit on mobile followed by agree button.

Current Cookie Component

Current code that does flex row or flex column style with separately loading description and link content:

...
<div class="cookieContainer" :style="containerStyle">
      <div class="content" :style="contentStyle">
        <span v-html="object.description" :style="descriptionStyle"></span>
        <a  @click="showCookies" href="javascript:void(0)" :style="linkStyle" v-html="object.linkLabel"></a>
      </div>
      <button class="btn" :style="agreeStyle" @click="agree" v-html="object.buttonLabel"></button>
</div>
...
descriptionStyle() {
    return {
        marginLeft: `${this.object.descriptionMarginLeft}px`,
        marginRight: `${this.object.descriptionMarginRight}px`,
        marginTop: `${this.object.descriptionMarginTop}px`,
        marginBottom: `${this.object.descriptionMarginBottom}px`,
    }
    },

    linkStyle() {
    return {
        marginLeft: `${this.object.linkMarginLeft}px`,
        marginRight: `${this.object.linkMarginRight}px`,
        marginTop: `${this.object.linkMarginTop}px`,
        marginBottom: `${this.object.linkMarginBottom}px`,
        color: this.object.linkColor,
        width: this.object.isEnableStack ? '100%' : 'initial',
    }
    },

    contentStyle() {
    return {
        flexWrap: this.object.isEnableStack ? 'wrap' : 'initial',
        width: this.object.isEnableStack ? '100%' : 'initial',
    }
    }
},
...
<style scoped lang="scss">
.cookieContainer {
  display: flex;
  height: 100%;
  align-items: center;
}
.cookieContainer .content {
  flex: 1 1 auto;
  display: flex;
}
...

It is possible to load the two in one html node/block? This so they fold as one when there is not enough space to acoomdate all? How would I approach this?

rhand

3 years ago

Level 6

Using

<div v-html="descAndLink"></div>

and

descAndLink: function(object) {
        return "<span>"+this.object.description+"</span><a>"+this.object.linkLabel+"<a>";
},

I can manage that but then the divider is display:block by default and description and text are on two inline blocks on two lines again and not together folding. I guess because I am again dealing with two inner inline objects.

rhand

3 years ago

Level 6

For wrapping of description I tried

descAndLink: function(object) {
    return "<span>"+this.object.description+"<a>"+this.object.linkLabel+"<a></span>";
},

and that works for default text, but on editing text things become blocks again and so on two lines. That is because default the text has no additional div block, but post text update with TinyMCE it does

rhand

3 years ago

Best Answer

Level 6

Well, to deal with the added div inside the added span tag for the description using tinyMCE I added

.cookieContainer .content span div {
    display: inline ;
}

That does work. But does feel kind of hackish. Adding another forced_root_block like span instead of

 forced_root_block: 'div',

does not work. TinyMCE demands a block element it seems. So do not see other options yet.

Please or to participate in this conversation.