Closed arichiardi closed 3 years ago
Yep, you have correctly identified the thing stopping you from having a stretchy button.
The reason we wrap some of the basic components in a box
is that if we didn't and you added one to a v-box
it would stretch all the way to the bottom (because the default :align
of a v-box is :stretch
), so wrapping in a box caters for the most common use cases.
And yes, there is no way to style that box via inline styles.
However, there would be a way to style it with CSS:
Wrap your button in a box and give the box a CSS class and size auto:
[re-com/box
:class "stretchy-button"
:size "auto"
:child [re-com/button
:on-click] #()]
Then create the following class:
.stretchy-button > div {
flex: 1 0 auto;
}
I have not tested this at all but think it should work.
Having said all this, an up and coming version of re-com will address this issue and allow you to stylr all parts of a component.
Are you thinking of solving this in some way? In general one might want to be able to specify :size
and what :size
should do is to be on the external box, while the internal button always inherits..again, I prefer to fork and contribute instead of patching on my side.
Yes, in an up and coming version of re-com, we will address this so you have the ability to style all parts.
Maybe I do not even need to wrap ;) Just assign class to button and select the div with css. Let me try it out :dancer:
Lol right, the div
is out :sweat:
Does not work because element.style
wins over my .css
. I will need to hijack the Hiccup, not difficult anyways.
Last chance suggestion until the new re-com comes out. Try adding !important
. As in:
.stretchy-button > div {
flex: 1 0 auto !important;
}
Great this works!
Peak preview :smile:
Just to note that the same happens in title
as it is wrapped in a none
v-box
:
src/re-com/text.cljs
[v-box
:class preset-class
:children [[:span (merge {:class (str "rc-title display-flex " preset-class " " class)
:style (merge (flex-child-style "none")
{:margin-top margin-top}
{:line-height 1} ;; so that the margins are correct
(when-not underline? {:margin-bottom margin-bottom})
style)}
@Gregg8 can I help with this issue in some way or it will be fixed in 0.8.0
?
Hello,
I guess new version never came out. Will you accept pull request for this problem?
As of 2.12.0 this should be solved by use of the new :parts arg and the :wrapper part keyword; see https://re-com.day8.com.au/#/button 'Parts' section.
I am basically in the need to stretch a button inside a
h-box
row.When I add
:style
to button though, nothing changes and I think I know why (but I might be wrong of course).The problem is clear from the Dev console (I hope):
The box enclosing the button does not have any style added and its
flex
isnone
. I guess this is the reason why it does not grow (or shrink for that matter). If I change thebox
'sflex
to1 0 auto
my problem is solved and the button grows.Maybe
re-com
should return a sizablebutton
?