Giter VIP home page Giter VIP logo

Comments (4)

benji300 avatar benji300 commented on May 30, 2024 2

Hi @GlassGruber,
I've added the input to allow inline renaming of the favorites. So opening the edit dialog is no longer necessary.
And a input element was the easiest way to enable this functionality. Unfortunately I've overseen this behavior with "minimum" size/width of input elements.

Now I know there's also another way to add this functionality. It is possible to allow also editing of span elements (https://stackoverflow.com/questions/21432238/make-a-span-item-editable).
I will try this solution once I have time to fix this issue.

from joplin-favorites.

GlassGruber avatar GlassGruber commented on May 30, 2024 1

Hey @benji300
I've tried to poke the CSS and you are right the main problem is the input element.

May I ask why not replace input with a simple span element? With a very rapid test via devtools I see that tabs width extend only to cover the length of the text inside the <span>.
Full disclosure I'm not very much into electron and Joplin plugin developing, so I hope this is not a RTFM question 😝

Anyway thank you for your extension! 🎩

from joplin-favorites.

benji300 avatar benji300 commented on May 30, 2024

Short analysis showed that it is caused by the added input fields for the favorite titles. These tags have a "size" attribute which has a default value of "20" (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size). Which should correspond approximately to a width of 100px.

from joplin-favorites.

GlassGruber avatar GlassGruber commented on May 30, 2024

Very nice! And thank you I didn't know contenteditable, you can learn something cool every day!

from joplin-favorites.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.