For some reason, if you add an image to htmlText, like the following:
myText.htmlText = "<img src='"+dataProvider.bodyImage.getUrl('original')+"' align='left' \/>" + dataProvider.bodyText;
The image will be succesfully added to the htmlText, but it seems to measure the sizes completely wrong. At times, the actual text (dataProvider.bodyText) will have part 'hidden' under the image. At other times, there are anywhere from 1 to 4 lines cut off at the bottom. However, if you select the text and drag your mouse down, you can see the bottom lines. It appears the text is all there, but the mx:Text component is not including the image in the textHeight, so it doesnt resize the componenet to the correct size.
Any ideas?
Currently using: Flex 3 (cannot upgrade to 4, unfortunately).
Thanks so much!
The key is you have to specify the width/height of the image in htmlText in order for it to be calculated correctly (or close to it, anyway).
Related
I am trying to use the default templates available with CKEDITOR.So I choose the one where an image and text can be placed side by side i.e. the image is occupying a certain part of the editor and the text the remaining part(but on the same horizontal level.I hope you get my point).But when I paste an image into the image area(provided in the template) , the text automatically shifts itself towards the bottom of the image(i.e. now image and text are not on the same level anymore). This happens no matter whether the size of the area provided for the image is bigger or smaller than the image.
Can any one say why this is happening and how to solve it.
You can change the Image Alignment To get the text in the same horizontal level
Image Properties -> Image Info -> Alignment -> Left | Right
I use Stimul soft 2013 for reporting in ASP .NET.
When I show my report in A5 letter, it shows like this:
My text from left did not show correctly. I suppose if I could add margin from left to my text, it will solve my problem.
Consider that, I added html tag justify to my text
any body.
Can you help me with this problem?
In Stimul you can shrink your text.
For this problem is better that you set Shrink Text to "True", set a Minimum Size for it, and set Word Wrap to "True".
And sometimes you must put an empty text box to fix it.
The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?
I am doing
<div class="catimgback">
<img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>
Where arguments.width = 163px; arguments.height=163px; and arguments.size = small
If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.
I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.
Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.
What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:
Go to Site Config > Edit Site from the Admin area
Click the Images tab
Towards the bottom, click Add Custom Image Size
Enter a Name (for example, catimg)
Enter the Height
Enter the Width
Click Save (You now have a custom image size that can be used for any content items)
Go to the Site Manager, and add/edit a content item
If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.
Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.
Cheers!
Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:
<h3>could not start.</h3>
<hr>
<p>These preferences must all be set before I can start</p>
I have no custom CSS. What appears on the screen is this:
You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.
I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.
I can't be the first person who's tried to put more than a single line into a DialogBox...
What's the trick to making the borders "repeat" and fill in the holes?
Wrap the HTML in HTMLPanel befor passing it to the DialogBox
DialogBox dialog = new DialogBox();
HTMLPanel panel = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
dialog.add(panel);
dialog.center();
Thanks to #Moh for placing me on the right path.
The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.
DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));
Adding buttons is left as an exercise for the reader...
GWT Dialoge box already have pre defined CSS.
you have to override or have to set your own style names using set Methods.
like..
dialogBox.setStyleName("yourcss");
Default css names starts with,
.gwt-DialogBox{}
My mx:Text's htmlText is the following:
mainText.htmlText = "<img src=\"breadmaker.png\" width=\"339\" height=\"275\" vspace=\"0\" hspace=\"0\" \/>" + "Lorem Ipsum is simply dummy tex......(more here)"
However, the result looks like the following:
Screenshot
As you can tell, it cuts off the first few characters in the text after the image tag (Lorem Ipsum is sim), but it is only because the image is full width. If I change the img tag to width=\"200\", it shows the text floating to the right.
However, as you can tell with a full width image (because the Text component's width is 339), it seems the text is still floating to the right, but it's hidden off to the right side of the image.
Any help?
HtmlText property is not very reliable when displaying HTML content. Adobe even has a note about img tag not being fully supported.
But if you're trying to get your text under you image, try to put them both in different paragraphs (p tag).
Alternatively you can check out Alex Harui's blog post from 3 years ago. He had at that point an HTML implementation that I found better for my purposes than the htmlText property.
What I ended up doing was determining if it was a full width image, and adding an actual <mx:Image> to the vbox. When I request the htmlText from the element, I simply run something like this:
if( fullWidthImage )
return "<p>"+imageString+"</p>"+body;
else
return body;
That way, the element itself returns the image wrapped in the body for a non full width image, but I make sure it is not included in a full width image until I need it there.