In flex, I have HBox in which I have loaded an image. I want to wrap text around it. Hence, there would be an image on right and text will be on left. After the image is cleared, text will be displayed 100% of the width.
How can I achieve it?
Although what you describe is easy to do with HTML. I didn't think the htmlText property in Flex supported anything more than simple HTML.
You'll want to look into the Text Layout Framework for Flex.
Edit: Despite my initial claim, the htmlText property actually does support the img tag with align property. It is documented here
Related
Using GWT I am trying to create a row of images with text centered below them. There isn't much detail on GWT online so I'm having a difficult time. The image should also be a hyperlink.
You can achieve this layout using standard HTML and CSS. The most obvious solution is to use floating divs which contain an image and its text, with "text-align: center" rule applied to the div.
In GWT you can achieve this either through a Ui:Binder, or, if the images are dynamic, by creating a custom widget to represent each image with its text.
The alternative solution is to use a HorizontalPanel widget and add images and text inside, which is an equivalent of using a table to achieve your desired layout. This solution is not responsive, though.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>
I have an image with a large amount of text to the right in a textblock control. How can I get that text to wrap on the right and below the image?
The standard TextBlock and Image controls wouldn't work for you.
I think you'd either:
have to use HTML inside a WebBrowser (this is potentially very slow and ugly!)
have to use multiple TextBlock's and you'd have to measure the text in order to implement the wrapping out yourself.
It might be an idea to consider a different layout - is the text really free flowing and needs wrapped around the image? Or can the text be split up into header, caption, body, etc?
i am pretty new to GWT,
i have an image that i have placed a text on top, i need the text to look as part of the image.
i have used the image widget and the HTML widget to position it on top of it, i need this text to change according the locale.
the problem that the text is selectable, so it does not look right.
1) is there any way to make the text un-selectable?
2) is there a better way to achieve that?
thanks
This is handled by the user-select attribute.
See: http://www.tek-tips.com/viewthread.cfm?qid=1184318&page=1