CODEWITHSUNDEEP
vue.jsvuetify.js
Hiba RRRR
Hiba RRRR

Reputation: 209

Text is written outside of the card

enter image description here

This is a project for monitoring employees and the first interface in this project is the login interface.

When the user presses the registration button, they must verify the email sent to them.

This is a form of verifying the e-mail, but the text is writing outside the card.

How can I solve this problem?

ConfirmEmail.Vue:

<template>
  <v-container>
    <v-layout row class="padding mb-7">
      <v-flex xs3 sm5 offset-sm3>
        <v-card
          class="mx-auto mt-5 pa-5 text-center secondary text-no-wrap"
          max-width="1000px"
          max-height="2000px"
          id="limited-products"
          outlined
        >
          <v-btn class="ma-2 icon-size" outlined fab color="blue">
            <v-icon large class="icon-size" color="blue darken-2">
              mdi-email
            </v-icon>
          </v-btn>
          <v-layout row class="pt-10">
              <v-flex xs12>
                <div class="text-center phase-style">Verify Your email address</div>
              </v-flex>
            </v-layout>

              <span class="SeparatorRow LoginDefaultView-separatorRow pt-6"
                ><span class="SeparatorRow-horizontalLine"></span
                ><span class="SeparatorRow-horizontalLine"></span
              ></span>

            <v-layout row>
              <v-flex xs12 xs3 sm5 offset-sm3>
                <div>
                  please confirm your email address,to activate your account. if
                you received this by mistakes or weren't expecting it, please
                disgard this email
                </div>
              </v-flex>
            </v-layout>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<style scoped>
.padding {
  padding-top: 30px;
}

.icon-size{
    font-size: 40px;
}
.phase-style{
    font-size: 26px;
}
.SeparatorRow {
  align-items: center;
  display: flex;
  text-align: center;
}
.SeparatorRow-horizontalLine {
  border-top: 1px solid #e8ecee;
  flex: 1 1 auto;
  margin-top: 8px;
  min-width: 1px;
  padding-top: 8px;
}
.LoginDefaultView-separatorRowLabel {
  color: #cbd4db !important;
  font-size: 16px;
}
</style>

Upvotes: 3

Views: 1248

Answers (1)

maxshuty
maxshuty

Reputation: 10662

Your v-card has no-text-wrap which is causing your text to be one long line. Assuming that is not there for a good reason, you could remove that in this instance and set a custom class on the v-card that has overflow: hidden; or overflow-y: scroll (vertical scrolling).

.confirm-card {
  overflow-y: scroll;
}

Upvotes: 2

Related Questions