HTML text in cards ?


Topic: HTML text in cards ?

Incremental asked 4 years ago

Hello, as in my CMS backend I have HTML text input with a simple text editor, is it possible to display it in MDB cards or panels ? It seems to be only raw text... https://mdbootstrap.com/docs/vue/components/cards/

Thanks


Magdalena Dembna staff premium commented 4 years ago

MDB Card has a slot inside, so you can nest custom components according to your needs. You can check out this example: https://mdbootstrap.com/docs/vue/forms/basic/#form-icons Best regards, Magdalena


Incremental commented 4 years ago

Well, I don't speak about template customization.

My data is on the form :

<p><strong>Duis convallis purus.</strong> suspendisse lobortis pharetra tempor....

but is always rendered as raw text within a mustache : {{ mydata.description }}


Magdalena Dembna staff premium commented 4 years ago

You can't render an HTML template with interpolation. Use v-html="myData" if you want to do so. Best regards, Magdalena


Incremental answered 4 years ago

Thanks, I tried : <mdb-card-text v-html="myData"></mdb-card-text>

without mustaches and it works with no more raw HTML.

It seems the problem is with my October Rich Editor which format bold with <strong> and not <b> ...

I don't know if the solution is on October side or Vue.js side ?


Magdalena Dembna staff premium commented 4 years ago

Both those tags are correct - the difference is that <b> indicates only bold font while <strong> is semantic and indicates the importance of a text inside. I believe there might be a difference in styling (font-weight) for them - you can adjust it with our CSS classes: https://mdbootstrap.com/docs/vue/utilities/text/#font-weight-and-italics Best regards, Magdalena


Incremental commented 4 years ago

Thanks Magdalena, I solved my problem on Vue side, adding in :

b,
strong {
    font-weight: bolder !important;
}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes
Tags