Add (flex) style to box enclosing a button

[arichiardi]

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).

    [button
        :class "btn btn-default"
        :style (flex-child-style "90% 0 auto")
        :label ...

The problem is clear from the Dev console (I hope):

The box enclosing the button does not have any style added and its flex is none. I guess this is the reason why it does not grow (or shrink for that matter). If I change the box's flex to 1 0 auto my problem is solved and the button grows.

Maybe re-com should return a sizable button?

[Gregg8]

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.

[arichiardi]

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.

[Gregg8]

Yes, in an up and coming version of re-com, we will address this so you have the ability to style all parts.

[arichiardi]

Maybe I do not even need to wrap ;) Just assign class to button and select the div with css. Let me try it out 💃

[arichiardi]

Lol right, the div is out 😓

[arichiardi]

Does not work because element.style wins over my .css. I will need to hijack the Hiccup, not difficult anyways.

[Gregg8]

Last chance suggestion until the new re-com comes out. Try adding !important. As in:

.stretchy-button > div {
    flex: 1 0 auto !important; 
}

[arichiardi]

Great this works!

Peak preview 😄

[arichiardi]

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)}

[arichiardi]

@Gregg8 can I help with this issue in some way or it will be fixed in 0.8.0 ?

[Nek]

Hello,

I guess new version never came out.
Will you accept pull request for this problem?

[superstructor]

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.