0

I have container with seven views inside:

<View class="container>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
</View>

Is it possible to set width of buttons to 1/7 of container width in *.tss or *.xml without using postlayout event? With four views I can simply specify 25%, but with 14.285714285% for seven sum of view width become more then 100%.

farwayer
  • 3,872
  • 3
  • 21
  • 23

1 Answers1

0

The reason it becomes more than 100% is because floating point math is funky. Also, to compound this I think Titanium rounds those percentages in code (just speculation).

For simplicity, try and keep the percentages to whole numbers, like this:

".day" : {
    width : "14%"
}

<View class="container" layout="horizontal">
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
    <Button class="day"/>
</View>

You might be able to get away with "14.2%" as well, since it does not have so many significant digits.

Community
  • 1
  • 1
Josiah Hester
  • 6,065
  • 1
  • 24
  • 37
  • This solution will not work correctly. Depends on width of the parent it may cause pixel misalignment and it will not fill up whole view's width. – 0101 Jun 29 '14 at 11:17
  • @0101 The point of the question was that the views size depend on the width of the parent. This works well enough, and fills 99.4% of the container. – Josiah Hester Jun 29 '14 at 12:55
  • If you think that this is good enough then OK... but sorry I can't agree with you. – 0101 Jun 29 '14 at 13:10
  • What would you suggest then? – Josiah Hester Jun 29 '14 at 13:21
  • I would like to post my solution ,but I can't untill I don't have all details from @farwayer – 0101 Jun 29 '14 at 13:25
  • Thx for responses guys. @JosiahHester I know about float number peculiarity. @0101 I'm using horizontal layout and want buttons fill all container size. I set `horizontalWrap: false` to prevent last button go to next line. All ok before using `borderColor`. In this situation right border of last button is missing. For now I see two workarounds: calculate and set last button width less than others in `postlayout` event or create fake view at right edge of container with back color similar to `borderColor`. But it's kludge. – farwayer Jun 30 '14 at 00:29
  • What about size of `.container`? Is it fixed size? e.g. `.container {width: 300, height: 50}`. Is it for iOS & Android? – 0101 Jun 30 '14 at 08:02