reactjs - React Native alignSelf center and stretch to maxWidth? -


i have following 

        <view style={{maxwidth: 700}}>           <view style={{backgroundcolor: 'red', flexdirection: 'row', justifycontent: 'space-between'}}>             <text>left item</text>             <text>right item</text>           </view>         </view>

which working i'd expect on large device (vertical black lines edges of emulator screen).

enter image description here

all center on screen.

when attempt adding alignself: 'center' parent

        <view style={{maxwidth: 700, alignself: 'center'}}>           <view style={{backgroundcolor: 'red', flexdirection: 'row', justifycontent: 'space-between'}}>             <text>left item</text>             <text>right item</text>           </view>         </view>

the width lost.

enter image description here

i assume because default alignself 'stretch'. there way both stretch content use maxwidth , center on screen?

try using flex:1 along maxwidth both make stretch limit width 700

<view style={{flexdirection:'row', alignitems: 'center', justifycontent: 'center'}}>     <view style={{flex:1, maxwidth: 700, backgroundcolor:'red', flexdirection:'row', justifycontent:'space-between'}}>         <text>left item</text>         <text>right item</text>     </view> </view>

-

Comments

Post a Comment

Popular posts from this blog

php - Auto increment employee ID -

Image
i want add employee , after that, employee id increment. textbox must disabled also here's code. want auto increment employee id when add new employee. hope me. thank in advance. :) <center> <form class="contact_form" action="#" method="post"> <h2>register new employee</h2> <br/> <table> <tr> <td><label for="emp">emp id:</label></td> <td><input type="text" name="emp" placeholder="emp id" required /></td> </tr> <tr> <td><label for="name">name:</label></td> <td><input type="text" name="fname" placeholder="first name" required /> <input type="text" name="lname" placehol...
Read more

php - isset function not working properly -

the page unable see login form code written under isset function statement. have written code correctly , have executed many times , code written inside isset statement not works. here code:- <?php session_start(); echo "<p style=\"font-color: #ff0000;\"> catogoies </p>"; echo '<link href="var/www/html/sample.css" rel="stylesheet">'; require_once('../html/conn.php'); $query = "select * catogories"; mysqli_select_db($dbc, 'odit'); $retrieve = mysqli_query($dbc, $query); if(!$retrieve) { die(mysqli_error($query)); } while($row=mysqli_fetch_array($retrieve, mysql_assoc)){ echo "<p style=\"font-color: #ff0000;\">".'<a href="cats.php? catogory='.urldecode($row["name"]).'">'.$row["name"].'</a>'."</p>"; $_session['cat']=$row["name"]; } if(!($_session)) ...
Read more

javascript - Thinglink image not visible until browser resize -

Image
i trying repurpose pre-existing theme, includes drop down menu displays image. trying embed thinglink drop down menu's content section, not visible until resize browser window. here menu looks like: then when clicked, can see empty space image should show: then when browser resized, image appears: this code content of menu: <div class="ajax_accordion_content" style="display: none;"> <div class="report-detail"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic"> <tbody> <!-- thinglink image embedded --> <img style="max-width: 100%;" src="http://cdn.thinglink.me/api/image/832705713204625409/1024/10/scaletowidth#tl-832705713204625409;1043138249'" class="alwaysthinglink"/> <script async charset="utf-8" src="http://cdn.thinglink.me/jse/embed.j...
Read more