So for a proof of concept I'm programming, I tried modifying an existing javascript tree widget implementation (from ExtJS). The effect I wanted to achieve was this:
Now, when doing this, the actual html that is rendered looks something like this:
The big problem I was having is that the node contents we not expanding to the fit the with of the page, i.e., fill what's left of the with. This was happening because the contents were rendered using a span tag and it because it's a inline element it just expands to the width of its contents. Using a div or changing the display of the span to block would not work either because block elements have a new line infront and after them. Using the "align:left" property would cause the div to align all the way to the left of the page.
The Solution? You may ask... Well, just hack it and use tables. I know it sucks, I hate it, I feel dirty by doing so, but to the extent of my knowledge there is not much else I can do. I wonder if it was so difficult creating an element in HTML that would allow you to display them inline and fill all the with to is to the left of them? Was it really that difficult????
+ Root Node
Content for the Root Node
+ Child Node
Content for the Child node
+ Another Child Node
Content for the Other Child node
Now, when doing this, the actual html that is rendered looks something like this:
___________________________
|+| Root Node |
| |Content for the Root Node|
|_|_________________________|___
| |+| Child Node |
| | | Content for the Child node|
|_|_|___________________________|_____
| |+| Another Child Node |
| | | Content for the Other Child node|
|_|_|_________________________________|
The big problem I was having is that the node contents we not expanding to the fit the with of the page, i.e., fill what's left of the with. This was happening because the contents were rendered using a span tag and it because it's a inline element it just expands to the width of its contents. Using a div or changing the display of the span to block would not work either because block elements have a new line infront and after them. Using the "align:left" property would cause the div to align all the way to the left of the page.
The Solution? You may ask... Well, just hack it and use tables. I know it sucks, I hate it, I feel dirty by doing so, but to the extent of my knowledge there is not much else I can do. I wonder if it was so difficult creating an element in HTML that would allow you to display them inline and fill all the with to is to the left of them? Was it really that difficult????
0 comments:
Post a Comment