question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text Field with action (button) on the left or right.

See original GitHub issue

Hi, I think it would be nice to have a button next or before a text field.

I am currently doing it like :

<v-layout row>
  <v-flex p>
    <v-btn flat icon>
      <v-icon class="primary--text">add</v-icon>
    </v-btn>
  </v-flex>
  <v-flex xs12>
    <v-text-field label="Services" name="Services" hint="Ex. Consultation" type="text" ></v-text-field>
  </v-flex>
</v-layout>

But the button is awkwardly positioned.

selection_133

selection_134

selection_135

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:8
  • Comments:27 (8 by maintainers)

github_iconTop GitHub Comments

58reactions
alizadeh118commented, Jul 26, 2019
12reactions
douglasg14bcommented, Apr 25, 2020

@johnleider Shouldn’t this be re-opened?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Text Field with action (button) on the left or right in vuejs
I am not able to have a button inside ...
Read more >
Submit Buttons on the Left or the Right? - UX Stack Exchange
Most contain simple phrases or questions, read right to left: having a button on the bottom right feels like both the most progressive...
Read more >
Primary & Secondary Action Buttons | by Nick Babich | UX Planet
Apple MacOS Guidelines says that “A button that initiates an action is furthest to the right. The Cancel button is to the left...
Read more >
Designing for Action: Best Practices for Effective Buttons
Buttons are designed for users to take action on a page or a screen. Follow these 13 tips about styles, placement, and wording...
Read more >
Where to put buttons on forms - Adam Silver
# Align the primary button to the left edge of the inputs · # Put the back button above the form · #...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found