hi, how do I make a re-com/input-text be 100% of its containing div?

adding :style {:width "100%"} does not that

so annoying

re-com leans heavily on flexbox. All the layout is done via hbox and vbox

The components themselves expect to be in parents elements with the correct flexbox attributes set.

A lot harder to put them in bare <div> elements

Be sure to read: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/layout (see for example the "Warning: Be all In" section)

@tomaas ^^^^

i guess then I'll have to then hbox, vbox

thanks @mikethompson

h-box and v-box layout is one of the best thing about re-com

Once you get the idea of what they provide layout-wise, you'll hate the alternatives, they are that good :-)

@mikethompson I always wondered - do you ever do table-like layouts with re-com, or maybe with some other library? E.g. I have a number of different inputs and I want to create a form where each input's label is to the left of it. And I don't want to set any widths/heights. Now I'm either using re-com with explicit widths/heights, or just plain <table> elements, but I don't really like them.

We do simple "tables" like this (see right hand side): http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/row-button (hint we set widths) For more complex tables we have developed a pretty complicated internal widget But we don't use <table>

@p-himik ^^^

Ah, this simple "table" has explicit widths. @mikethompson Any chance of that complicated widget being moved to re-com?

Sadly, probably not. It is a lot of work to make something good enough to release.

I see. Thanks.

@tomaas, to pick up on the point made by @mikethompson above, we can solve your problem with a box, but first a little background. If you look at the re-com source, you'll see the [:input] is nested by two parent [:divs]. This is because we have added extra features like status icons. See http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/input-text When you add a :style, you are styling the [:input], but when you add a :width, re-com targets the outer [:div] and it's this div we need to style to play nicely within the Flexbox layout system. So we can set the :width to "100%" and this works (hmmm, in most contexts, e.g. as a child of a v-box). Wrapping the input-text in a box with :size set to "auto" is the generic solution (I believe). Try pasting the following code where you want a stretchy input-text and the bottom one should give you what you want...

[rc/input-text
 :model     "not-stretchy"
 :on-change #()]
[rc/box
 :size  "auto"
 :child [rc/input-text
         :model     "stretchy"
         :width     "100%"
         :on-change #()]]

@gregg thanks

I have another problem

when component first paints @items the scroll is above the div, however, I can down to bottom, when the following @items changes get rendered from bottom to top, as intented by this column-reverse

i found the solution here: http://jsfiddle.net/jbkmy4dc/3/

is there any difference in performance in these two scenarios? 1 table component subscribed to a subscription that passes the dereferenced value to each of its table row components.... or 1 table where each row is subscribed to that same subscription and dereferences it internally?

I'm about to start working on a new re-frame project (other business priorities have kept me from front end work for a long time) - I've really missed it 🙂

@joshkh yes, there will be differences. But it depends on a few factors as to whether those differences are materially significant. In essence, you are asking this question: "what arrangement will cause the least amount of unnecessary computation". "what (bad) arrangement means Reagent components are unnecessarily re-rendered, and how can I avoid that". So, first, be sure you understand what causes Reagent components to re-render. Read the "Reagent Tutorials" section at the bottom of this page: https://github.com/Day8/re-frame/wiki#reagent-tutorials Then, I wrote this up a long time ago, and it may be useful: https://github.com/Day8/re-frame/blob/master/docs/Performance-Problems.md