diff --git a/examples/quiz/Example.vue b/examples/quiz/Example.vue index d0047ca8..b381ce27 100644 --- a/examples/quiz/Example.vue +++ b/examples/quiz/Example.vue @@ -68,7 +68,7 @@ // Import necessary components and classes import FlowForm from '../../src/components/FlowForm.vue' - import QuestionModel, { QuestionType, ChoiceOption} from '../../src/models/QuestionModel' + import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel' import LanguageModel from '../../src/models/LanguageModel' // If using the npm package, use the following line instead of the ones above. // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form' diff --git a/src/assets/css/common.css b/src/assets/css/common.css index 2f6abb5e..5839fab4 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -327,13 +327,11 @@ span.f-answered{ } /*links*/ - a.f-link, .field-submittype .section-wrap a { - margin-right: 10px; color: inherit; - border-bottom: 1px solid; - white-space: pre-wrap; + border-bottom: 1px dotted; + word-break: break-word; } a.f-link:hover, @@ -435,11 +433,19 @@ span.f-text { margin-right: .6rem; } +/*description*/ p.description { margin-top: 0; padding-right: 4rem; } +p.description span, +p.description a.f-link { + margin-right: 8px; +} + + + /*f-radios (multiple-choice)*/ ul.f-radios { margin: 0; diff --git a/src/components/Question.vue b/src/components/Question.vue index 3a46584d..205ea002 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -50,16 +50,14 @@

- {{ question.description }} + {{ question.description }} - {{ link.text || link.url }} - + >{{ link.text || link.url }}