slashmili
I’m trying to create a circular button using the following code(using phoenix + tailwind)
<button class="bg-violet-700 text-slate-50 rounded-full p-3">
<span class="hero-arrow-right w-4 h-4"></span>
</button>
but for some reason the button tries to apply line-height 24px and make button oval shape. I can add leading-4 to force the line height to 16px but I’d prefer to avoid that since this a component that I want to reuse for text and icons.
I tried to isolate the html/css in tailwind playground https://play.tailwindcss.com/VTdFLa0iVb
what other options beside setting line-height do I have?
Thanks!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 3 of 3 Posts
andreaseriksson
Look at the rounded icon buttons here:
slashmili
Thanks! it’s straight forward when element inside button is svg. But when it’s a
span(the way thaticonfunction in default core component is setup) it’s goes out of shapehttps://play.tailwindcss.com/5TEuNJR70k
tcoopman
You should say that the element is not allowed to change it’s size, for example with flex: