How to make something behind without using position absolute

I'm working on a quiz app. In which users select an option based on his confidence so for that I decided to make three boxes in each option using touchable opacity and its working fine but I want to have text behind these boxes that I failed to achieve yet. Here is my code

Note: This "Style" contains style objects for the app.

<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>

 <Text>Ajax</Text>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity> 

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

</View>

enter image description here

One way is to do that is to make text position absolute but after that, it is impossible to change the height of the parent dynamically according to text size. Please help me to solve this issue or suggest me if you know any better solution than this. Thanks!

asked Nov 20 '18 at 11:45

waleed

468

add a comment |

Note: This "Style" contains style objects for the app.

<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>

 <Text>Ajax</Text>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity> 

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

</View>

enter image description here

asked Nov 20 '18 at 11:45

waleed

468

add a comment |

Note: This "Style" contains style objects for the app.

<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>

 <Text>Ajax</Text>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity> 

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

</View>

enter image description here

asked Nov 20 '18 at 11:45

waleed

468

Note: This "Style" contains style objects for the app.

<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>

 <Text>Ajax</Text>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity> 

 <TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>

 </TouchableOpacity>

</View>

enter image description here

css reactjs react-native

asked Nov 20 '18 at 11:45

waleed

468

asked Nov 20 '18 at 11:45

waleed

468

asked Nov 20 '18 at 11:45

waleed

468

asked Nov 20 '18 at 11:45

waleed

468

asked Nov 20 '18 at 11:45

waleed

468

add a comment |

2 Answers
2

active

oldest

votes

Instead of setting the text as absolute, you could put the TouchableOpacity boxes inside a flex container and set the container to absolute instead. This would allow the text size to control the height of the box, while allowing you to add as many boxes as you like in front of the text.

See my example here:
https://codepen.io/sungaila/pen/oQpPQq

answered Nov 21 '18 at 6:15

Sungaila

537

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

add a comment |

You can give negative margin values to other elements.

Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.

<Text>Ajax</Text>

<TouchableOpacity style={{marginTop: -100}}

This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392315%2fhow-to-make-something-behind-without-using-position-absolute%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

See my example here:
https://codepen.io/sungaila/pen/oQpPQq

answered Nov 21 '18 at 6:15

Sungaila

537

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

add a comment |

See my example here:
https://codepen.io/sungaila/pen/oQpPQq

answered Nov 21 '18 at 6:15

Sungaila

537

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

add a comment |

See my example here:
https://codepen.io/sungaila/pen/oQpPQq

answered Nov 21 '18 at 6:15

Sungaila

537

See my example here:
https://codepen.io/sungaila/pen/oQpPQq

answered Nov 21 '18 at 6:15

Sungaila

537

answered Nov 21 '18 at 6:15

Sungaila

537

answered Nov 21 '18 at 6:15

Sungaila

537

answered Nov 21 '18 at 6:15

Sungaila

537

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

add a comment |

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

Another problem comes in. Do you know how to make touchable opacity touchable while having an overlay of text? Because I want those block to not make text unreadable so for that I gave the text to z-index of 1 but this makes the Touchable opacity unpressable.

– waleed
Nov 21 '18 at 9:58

Try setting the CSS to pointer-events: none on the text, and pointer-events: auto on the boxes.

– Sungaila
Nov 21 '18 at 10:24

It doesn't make boxes to clickable because the text is always above the boxes. I want to show the text above the boxes and also make them touchable

– waleed
Nov 21 '18 at 11:25

Hmm, you might have to make a new question for this. One hack I can think of would be to put the text back behind the boxes and set its opacity to zero (so that it still sets the height), then add a new text element inside the first TouchableOpacity box and set its position to absolute. The new text element will be the 'display' text, and the old text element will purely be to set the size of the box.

– Sungaila
Nov 21 '18 at 12:23

Hmm, thanks! that can work maybe. But I found another solution that is similar to this. I added up another View of boxes with the same absolute position. This is used to trigger actions onPress event and another one that is behind the text is used to give the borders and highlighted background and it's working fine. Thanks again for the help.

– waleed
Nov 21 '18 at 12:34

add a comment |

You can give negative margin values to other elements.

Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.

<Text>Ajax</Text>

<TouchableOpacity style={{marginTop: -100}}

This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

add a comment |

You can give negative margin values to other elements.

Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.

<Text>Ajax</Text>

<TouchableOpacity style={{marginTop: -100}}

This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

add a comment |

You can give negative margin values to other elements.

Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.

<Text>Ajax</Text>

<TouchableOpacity style={{marginTop: -100}}

This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

You can give negative margin values to other elements.

Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.

<Text>Ajax</Text>

<TouchableOpacity style={{marginTop: -100}}

This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

answered Nov 20 '18 at 12:37

Faruk Yazıcı

1,588824

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

add a comment |

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

Thanks! but This is almost the same solution as position absolute to the text. Actually, I want to have a dynamic height of parent and those bars according to the text (number of lines)

– waleed
Nov 20 '18 at 12:55

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu