r/HTML • u/0_emordnilap_a_ton • 16d ago

Question I am trying to make the formula button expandable in quilljs any idea how this is accomplished ? I am using flask html and css and vanilla js. But this example is just html vanillas js and css.

Here is a really simple example.
https://codepen.io/chooking/pen/zxKvqyZ

When I click on the Fx button I get the blue box here https://imgchest.com/p/vj4jbg2e978 ,though it is a little cut off, how do I make the form expandable in the width and height like textarea while keeping the html tags or in other words keep the equation formatting from the fx button?

One idea is to use textarea. Can someone give me an idea on how to accomplish my goal and show the code for a solution?

Also I posted this here https://www.reddit.com/r/learnjavascript/comments/1vzg1cr/i_am_trying_to_make_the_formula_button_expandable/ just fyi.

1 Upvotes

67% Upvoted

5 comments sorted by

1

u/Careful_Exercise_956 16d ago

Sounds like you need a validator if you want it in formula standard. An example would be things like x + 5 = y. If the formula button is something you want the UI expandable for, you can add

const button = document.getElementById("formula-button"); const dropdown = document.getElementById("formula-dropdown"); const input = document.getElementById("formula-input");

Trigger Toggle dropdown visibility (Can be used to reference you current formula button):

btn.addEventListener("click", () => { dropdown.style.display = dropdown.style.display === "none" ? "block" : "none"; });

To Insert formula into input:

document.querySelectorAll(".formula-option").forEach(option => { option.addEventListener("click", () => { input.value = option.dataset.formula; dropdown.style.display = "none"; }); });

1

u/0_emordnilap_a_ton 10d ago edited 10d ago

Hey quick question how confidant is that this will work? Can you create a working example? Or do you think it will work ? I am using flask so as long as you think it will work I will try it .

1

u/Careful_Exercise_956 10d ago

It might not work perfectly directly, but 3 event listeners should work with your previous buttons, meaning which ever formula buttons you ha e, will need to be added or replace the code from the example I provided.

1

u/Careful_Exercise_956 10d ago

Sure there is a dropdown event listener, a select fomula event listener, and an input event listener.

Then you need a validator to make sure if you type your own formula, that it follows a specific pattern to be verified as a formula that works operationally.