I am using GWT 2.03 and am have an image that I want to place partially in an area with a background and partially above a background. I am using a FlexTable to try to accomplish this and have used GIMP to cut the image into two sections. I am trying to load the top part of the image into row 0 and the bottom part of the image into row 1. I set the alignment of the top image to ALIGN_BOTTOM but there is a bit of space at the bottom of cell and so the two parts of the picture don't touch.
Here is an image showing what I am talking about. I set the background of the cell to be yellow show where the cell boundaries are. The bottom image and background are rendering correctly.
![alt text][1]
[1]: http://www. freeimagehosting. net/uploads/f02462d659.png
Here is the relevant code snippet:
FlexTable table = new FlexTable();
table.setCellSpacing(0);
table.setCellPadding(0);
table.setBorderWidth(0);
FlexCellFormatter formatter = table.getFlexCellFormatter();
table.setWidget(0, 0, topImage);
formatter.setStyleName(0, 0, "topImageStyle");
formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
table.setWidget(1, 0, bottomImage);
formatter.setStyleName(1, 0, "bottomImageStyle");
How can I get rid of that space between my image and the cell boundary?
This is caused by the Standards rendering mode (see this article for a thorough explanation).
A quick fix (which should be applicable for this case) is to set your image slices to have the display: block style.
PS: It probably doesn't matter at this size (2x1) but Grid should be used when the size of the table is constant/known beforehand - it just offers better performance than FlexTable.
GWT has a class called DecoratorPanel, which targets this use case. See the JavaDoc for details on how to use it.
I have some suggestion for you:
I'm not sure, if this work for FlexTable, but try setCellPadding(0) or setCellSpacing(0)
Try addStyleName or setStylePrimary instead setStyleName
Try to set the style to the image and not to the formatter
Try also formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM) with formatter.setStyleName(1, 0, HasVerticalAlignment.ALIGN_TOP).
Firebug can help you to find, what you need to change to fix the problem. If you post peace of code (DOM), we can try to help you.
Related
My Figma element has transparent background but I want to get it solid, simple as that, and I can't find the correct way how to do it.
Which thing in the settings I should check?
To do what you want:
First:
make sure the element fill is 100%, when you are selecting the element layer itself, it's here:
Second:
make sure the frame itself has no grid active, so you can click the minus icon behind the grid section if it's active, like here:
I needed to remove layout grid for the whole page and colors became normal. I think that is so user could see the background grid so he could make the best possible design and then you delete it when you stop developing and your work is finished
Go to the fill section of the items settings and make sure the percentage next to the color is 100% or whatever opacity you want.
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
By default, vue-js-modal scales from the central point, which is pretty strange. Is it possible to scale it like all other windows (according to one of the edges)?
EDIT
On the official page (http://vue-js-modal.yev.io/), when you 'click' resizable, you can see what I mean. In the docs there is a line, which describes 'resizable' attribute: "If true allows resizing the modal window, keeping it in the center of the screen". I didn't find other info and don't want to change the source code. I don't want it to be keeping in the center, because I think that this is not correct.
You need to use CSS styles to configure it manually before Overlay
.v--modal-overlay{
//add style like u r requirement
}
In style, you can also add these line to make it left align after it overlays
v--modal-box v--modal.{
left:0px !important
}
I am trying to create HTML Table and give some cells a special border,
you can see the example here - I marked it with Arrow..
Please help me to understand how can I create such border , without using images.
I read this topic, but I could not be able to transfer it to table element or do it as the border of it..
Customizing border properties using zigzag edges
Thanks,
Gabi.
The answer is to use an image as a background to the cell. The image contains the curve and the image could be white and grey, or transparent and grey depending on your use case.
Always try to see what could be there instead of what you think is there
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/