I'm trying to use a custom Text component to show a series of comments. I got
the original idea from:
http://www.eonflex.com/?p=40
I've got the base case working but I am stuck with 2 problems I cant seem to
figure out:
Since I am drawing around the text, the actual height of each bubble is
greater than that of the Text field, as a result, the last bubble is always
chopped off. I have tried explicitly overriding the height getter, and adding
some padding, but I cant seem to get it right. You can see an example here:
http://test.lambandtunafish.com/bubbles/CommentTest.swf
In my layout, I have 2 VBoxes (one nested inside the other). The first vbox
shows a form where the user can enter a comment, and the second box has all the
comments. In order to ensure that the scrollbars only show up on the second box,
I set minHeight="0" on the nested VBox, but then for some reason, some comments'
text is shifted to the right. You can see an example here (look at the first
comment): http://test.lambandtunafish.com/bubbles/CommentTest-minHeight.swf
Rather than posting the code here, I've provided some links:
Container: http://test.lambandtunafish.com/bubbles/CommentTest.mxml
Bubble: http://test.lambandtunafish.com/bubbles/CommentBubble.as
If anyone has any ideas, I would appreciate it.
Thanks!
Have you considered adding padding to you VBoxes?
<mx:VBox id="vBox" verticalGap = "100"/>
There is a nice example here
Related
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.
I'm using Dojo GFX to do some simple drawing, but having a problem with IE 7/8 (switching browsers is not an option).
If I create a div, set up a surface and draw some rects, they draw correctly relative to the div, so far so good.
However, what I want to do is create a widget, something with an embedded 'surface' that draws based on some widget-specific data. As such, I have a widget that contains a div, and I draw into this div. When I do that, the rects I create behave as if they are responding to a float:right, appearing in order they are created and ignoring the 'x' parameter.
I assume that this behaviour is something to do with CSS, but I haven't got to the bottom of it yet. Any ideas or solutions gratefully appreciated!
Updates:
I've disabled all stylesheets and I am not using style attributes. No difference to the behaviour.
I've inspected the markup that gets generated using IE8 dev tools. Apart from the different location of the containing div, the only difference I can see is that the v:roundrect elements have no child elements when created against the widget div, but they do have empty elements like stroke when created against the div referenced by ID.
Reading back through the docs, a difference I can see that might be responsible is that the postCreate method where I am doing my drawing is manipulating a div that has not been added to the dom yet, whereas drawing on a hardcoded div is done when it does exist. Maybe the difference in rendering is something to do with this? Is there a specific lifecycle function which is appropriate to draw in for widgets?
It seems that if you are going to use Dojo GFX and draw on DOM elements that are created as part of a widget in IE7/8, you must actually do the drawing in an override of the startup() method.
Drawing in the postCreate() method causes incorrect rendering resembling a float: left.
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
In my application, I am using a BarChart to display data. However, the text in the category axis can be too long to display on the chart, so flex adjusts the font size automatically to the point that the data is either unreadable, or the text is partially visible.
The length of the text varies every time new data comes in, so I can't set the gutterLeft attribute to a static value at runtime.
Two things that come to my mind are:
Change the gutter dynamically according to new data
Have a scroll bar on the categoryaxis so that if any text won't fit in the space, the user can scroll to see it
Any help would be appreciated.
EDIT:
I have hundreds of rows of data being graphed at once, so I can't really use a legend for each item.
Also, I have no idea how to change the gutterLeft property with actionscript. Doing it in MXML is as simple as
gutterLeft="100"
but I cannot access the property using actionscript. I also tried to bind the gutterLeft variable to an integer and change that integer and it still didn't work. :|
the problem is that gutterleft is a style, and therefor needs to be set as one when using actionscript.
I was hoping to see your code to give a more detailed answer but what you want to do is:
mychart.setStyle("gutterLeft",500);