Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(v-pagination): button cutting the page number #5128

Conversation

windhorn
Copy link
Contributor

@windhorn windhorn commented Sep 20, 2018

Description

When props:length is a very large number,
the number of the button protrudes.
So set the min-width: 34px in class .v-pagination__item.
And set padding as style fine adjustment.

Motivation and Context

fixes #5126

How Has This Been Tested?

visually and inspect element

Markup:

<template>
  <v-app>
    <v-pagination :length="100000000" :total-visible="6" :value="999999" />
  </v-app>
</template>

<script>
  export default {
    data: () => ({
    })
  }
</script>

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

  • The PR title is no longer than 64 characters.
  • The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have created a PR in the documentation with the necessary changes.

When props:length is a very large number,
the number of the button protrudes.

# <type>: (If applied, this commit will...) <subject> (Max 50 char)
# |<----  Using a Maximum Of 50 Characters  ---->| Hard limit to 72 -->|

# Explain why this change is being made
# |<----   Try To Limit Each Line to a Maximum Of 72 Characters   ---->|

# Provide links to any relevant issues, articles, commits, or other
# pull requests
# Example: See vuetifyjs#23, fixes vuetifyjs#58

# --- COMMIT END ---
# <type> can be
#    feat     (new feature)
#    fix      (bug fix)
#    refactor (refactoring production code)
#    style    (formatting, missing semi colons, etc; no code change)
#    test     (adding or refactoring tests; no production code change)
#    chore    (updating npm scripts etc; no production code change)
# --------------------
# Remember to
#    Capitalize the subject line
#    Use the imperative mood in the subject line
#    Do not end the subject line with a period
#    Separate subject from body with a blank line (comments don't count)
#    Use the body to explain what and why vs. how
#    Can use multiple lines with "-" for bullet points in body
#
# If you can't summarize your changes in a single line, they should
# probably be split into multiple commits
# --------------------
# For more information about this template, check out
# https://gist.github.com/adeekshith/cd4c95a064977cdc6c50
@johnleider johnleider merged commit 40e1354 into vuetifyjs:master Oct 2, 2018
@lock
Copy link

lock bot commented Apr 15, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

@lock lock bot locked as resolved and limited conversation to collaborators Apr 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

v-pagination button cutting the page number
2 participants