Dynamic positioning of a React JSX button

Question

I am working with React and I need put this button like that:

but I have a big problem because I am forbidden to use margin or other form of positional where I have values with px, or rem, basicaly static positional. Now, I have this code

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>

And now my button is like that

Possible duplicate of [How to center text vertically with a large font-awesome icon?](https://stackoverflow.com/questions/17309928/how-to-center-text-vertically-with-a-large-font-awesome-icon) — Toan Lu, Aug 06 '18 at 10:49
It would be better if you setup repl.it or another react-native sandbox so we can test it live. Otherwise, it is more like a guess :) Check out my answer — amankkg, Aug 06 '18 at 11:12
What is the code of the second screenshot? Now their heights look equal, seems like it's a bit closer to solution — amankkg, Aug 06 '18 at 11:59
I don´t know do this... I put the code in the question and thanks for help me — Álvaro Magalhães, Aug 06 '18 at 13:05
Still, it's better to upload all of the code, not it's screenshots :) Anyway, I updated my second sandbox with `styled-components`, try to play with it by adding your real code to this sandbox step by step, hope you'll get your issue fixed. — amankkg, Aug 06 '18 at 13:58

score 0 · Answer 1 · answered Aug 06 '18 at 10:38

0

You can use margin in % (ie: 50%) and then use transforms, in percent (ie: transform: translateX(-50%), to adjust position. If you can provide a static stylable html I can produce an example for you.

answered Aug 06 '18 at 10:38

Mosè Raguzzini

15,399
1
31
43

amankkg · Accepted Answer · 2018-08-06T11:54:23.283

0

Parent's styles should already align children (name and icon) by the center, not by the top. And yes, no positioning styles are required, unless there are hardcoded heigh/margin values in children itself.

Desired behavior can be broken because of the implementation of ActionButton.

Anyway, my suggestions to tackle this issue:

use flex-direction: 'row-reverse' instead of floats;
remove display: 'flex' from child elements.

Here is a simplified and working example for web https://codesandbox.io/s/62nynm1wzk, hope it can help you to get started.

Update: here is an example using button instead of div as container, since it is closer to original markup: https://codesandbox.io/s/y7q1vlwkwj

edited Aug 06 '18 at 11:54

answered Aug 06 '18 at 11:10

amankkg

4,503
1
19
30

I did like you said and I understood your code but didn´t work – Álvaro Magalhães Aug 06 '18 at 11:42
} name={
Filtros
} > – Álvaro Magalhães Aug 06 '18 at 11:44
Result is still the same as in your question? If so, try to replace components one by one: replace parent with plain div and render icon and text as children – amankkg Aug 06 '18 at 11:45
I put the result in the question – Álvaro Magalhães Aug 06 '18 at 11:47
But in the component or in actionbutton? – Álvaro Magalhães Aug 06 '18 at 11:50
First, try to replace ActionButton with plain div or button. If not worked out, return ActionButton and try replacing one of it's children: icon or text, then second children. One of these components break the layout. Here is updated button example https://codesandbox.io/s/y7q1vlwkwj – amankkg Aug 06 '18 at 11:52
I don´t know do this... I put the code in the question and thanks for help me – Álvaro Magalhães Aug 06 '18 at 13:17

kumar k · Answer 3 · 2018-08-06T13:28:17.453

Try to remove the flex and display style property in name and icon props like below and check it. Because flex:2 will change the width of child element with equal spacing.

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>

Dynamic positioning of a React JSX button

3 Answers3