I've got HTML component as part of a datagroup itemrenderer which I need to resize the content of (there are lots of them).
This works quite well but the content looks really crusty. No font antialiasing. Even at 50% looks crusty.
I've considered generating thumbnails bitmaps on load 'complete', but that would be my last resort.
<mx:HTML location="{uri}" width="900" height="660" scaleX=".25" scaleY=".25" />
Any ideas?
Thanks a lot.
nic
I think the problem is with the HTML page. If you've designed the page, make sure that you have tested the page on various sizes (by resizing). Flex's mx:HTML simply renders what is in the HTML page.
A good HTML design includes ordering all page elements inside a table (with invisible borders) so that even when the page is resized, the elements won't get crusty.
Thanks,
Nirmal
The solution is to reduce size by changing width and height of mx:HTML and keep scaleX and scaleY equal to 1 (even if you parent has scale < 1, then your mx:HTML shall have scale = 1/parent.scale).
In your example it will be like that:
<mx:HTML location="{uri}" width="{900*0.25}" height="{660*0.25}" scaleX="1" scaleY="1" />
Related
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
<amp-carousel
layout="fixed-height"
height="426"
type="carousel"
heights="(min-width:957px) 426px, 376px">
<amp-img src="https://dummyimage.com/400x210/ccc/aaa" height="210"
width="400"
sizes="(min-width: 957px) 400px, 210px">
</amp-img>
</amp-carousel>
The code below works as intended i.e. carousel height changes with screen size but error pops up
The attribute 'heights' in tag 'amp-carousel' is disallowed by specified layout 'FIXED_HEIGHT'.
without the fixed-height layout, horizontal scroll is not working as intended.
I tried reducing duplicate code as written in this page to showcase stories.
You can not use "heights" attribute with layout="fixed-height", read it here https://www.ampproject.org/docs/reference/common_attributes#heights
So basically if you want to have responsive height, go with layout="responsive" and set heights attribute. Otherwise if you are going with layout="fixed-height" you have to duplicate the code with different "media" attribute(as seen in the link you have shared). Which works as, if the media condition is satisfied than only that particular tag will come into play otherwise that will be display none.
I have an image gallery app that has a slider to control the width of the thumbnails that ranges from 80 to 1024. As you move the slider the thumbnails width changes to effectively scaling the image between 80px and 1024px. Below the thumbnail is some information about the image such as the name, size, dimensions, etc. There is also a set of icons that do various tasks (delete, edit, copy, etc). All of this information is located within a VBox.
The problem I am having is I would like to have the VBox hide when the width of the thumbnail reaches 150 px or below. This I have been able to accomplish with the following code:
<mx:VBox visible = "{thumbnail.width > 150}">
The issue is that while the information within the VBox is now not visible, the real estate it takes up is not released. In other words, there is now a blank space the exact size of the VBox. What I'd like to do is to be able to release this space.
I know this is probably something simple that I'm overlooking, but today my brain is just not working, so any help will be appreciated.
BTW: I am using the Flex 3.6 SDK.
Try using includeInLayout:
<mx:VBox visible="{thumbnail.width>150}" includeInLayout="{thumbnail.width>150}">
I am using mx:Tree (in Flex 4), and assigned a customised MXTreeItemRenderer for every items. As the TreeItemRenderer contains a list with tileLayout, which means the height of every row is variable. So I have to set the tree's "variableRowHeight to true. When I was testing the tree, everything went well. But when I was using the vertical scroller, I met some problems:
The scroll bar did not move to the position I want. When I was scrolling the content, the scroll bar sometimes scrolled to a unwanted position (e.g. the head of the tree). When there are more rows, the problem is more obvious.
When I was scrolling the tree, the images were flicking all the time. That means, the images are reloading I guess. any help?
Is there anyone who can help me solve the problems? many thx :)
One way that I found helpful was to just wrap the tree in a canvas. I was having the same problem with the tree's scrolling because it would do all sorts of funky things, but when you allow the canvas to handle the scrolling instead of the tree everything works out. I chose this over replacing it with the spark tree just because it was a nice quick fix.
<mx:Canvas height="100%" width="100%" verticalScrollPolicy="on">
<mx:Tree width="100%" height="100%"
click="click_handler(event);"
verticalScrollPolicy="off"
itemRenderer="com.fti.view.itemRenderers.defaultRenderer"
itemClose="{treeSample.height = treeSample.measureHeightOfItems();}"
itemOpen="{treeSample.height = treeSample.measureHeightOfItems();}"
id="treeSample"
variableRowHeight="true"/>
</mx:Canvas>
Be sure and include those itemClose and itemOpen properties so the canvas is able to accurately set the height and scroll properly. One warning is that if you're working with larger trees, this can be a bit heavy and impact performance.
use SparkTree
http://kachurovskiy.com/2010/spark-tree/
there is too much bugs with the current tree.
( whating for Flex 5 to clean out thoose things finally ) :)
I have a table, and one of the cells has dynamically generated content.
I want to have a background image that is exactly the same size as the cell. (ie not tiled, but stretched).
I've found a very good reference here, which tells you how to do it in Javascript. This example solves the problem by placing an HTML DIV on the top and the bottom of the cell, then getting Javascript to work out the vertical pixel difference between them.
The biggest problem was that I declare the image as
<asp:Image ID="imgContentsBackground" CssClass="ContentsBackground" runat="server" ImageUrl="~/Images/MoneyColour3.jpg" />
but for some reason ASP.NET arbitrarily renamed the ID from "imgContentsBackground" to "ctl00_imgContentsBackground". Once I hardcoded that ID in the Javascript, the referenced example worked for me.
But I'm thinking - given the rich functionality of ASP.NET, is there a simpler way to determine the size and position of a table cell once the content has been generated, and make an image occupy those dimensions?
if hard-coding the generated name solves it then why don't you try this:
<%= imgContentsBackground.ClientID %>