I'm trying to figure out how to have a DIV column snapping to some fixed-size grid, via CSS.
Here's the test page I'm working on: http://mapofemergence.com/test/MoEv2/
What I'm trying to get, is the right div (the green one) someway snapping to the background grid quads: when resizing the browser window, the red quads should distribute in the middle area, while the green column should "fill" the remaining area on the right side of the page, and yet remaining always aligned (on the left) with the grid.
Basically, being a the grid's quad size, the right green div should have a variable width, equal to or greater than a, and anyway minor than 2a (in which case it should set back to a width of a, while having one more red quad moving from the lower row to the upper one).
here's an image to get a better idea:
(sorry, my reputation doesn't allow to hyperlink)
I'm not really sure this can be done via CSS, but I'm sure that some of you can help finding some solution or workaround. I wouldn't use javascript, if possible.
Thanks for your help,
s
Unfortunately HTML/CSS don't have features necessary to do what you want. You can only achieve it by using JavaScript.
You should bind a function to window resize event which will set green's div width to desirable value. In jQuery it should look something like that:
$(window).resize(function() {
$("#rx").width(
parseInt($("#rx").css("min-width").slice(0, -2)) + (
($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
)
);
});
Note that this code can be easily optimised but I wanted to make it as simple as possible.
Related
I am testing a godot app, where there is a text heading along the top, and there are buttons along the bottom. For now I have a spacer in the middle to keep the heading at the top and the buttons at the bottom.
If I set Project Settings -> Display -> Stretch to disabled, then I can set a font and button size that looks reasonable for my laptop, and the font size for the heading and button doesnt shrink smaller and larger when the window is adjusted.
How do I guarantee and/or test that the size will be appropriate when the application is exported to iOS and Android? Is there some kind of guide that will help choose appropriate (non scaleable) button sizes for all devices?
How Controls are positioned
There are three intended ways to position a Control in Godot:
Placed in a Container. In this case the Container will control position and sizing of the child Control, taking into account "Size Flags".
See also Using Containers, and Containers.
By anchors (anchor_*) and margins (margin_*). They determine the position of the edges of the Control. The anchors are factors, and the margins are offsets.
For example, the leftmost part of the Control will be positioned at anchor_left * parent_width + margin_left, relative to the parent Control.
You will find presets in the "Layout" menu that appears in the tool bar when you have a Control selected.
See also Size and anchors.
By rect_position and rect_size. These are relative to the top left corner of the parent Control.
Ultimately the other ways to position the Control are changing these. And you can also change these even if you positioned the Control by other means… Which is not intended, but supported (because it is useful to add animations to the UI among other things).
Regardless of which one you use, Godot will respect rect_min_size. And yes, there is also rect_rotation and rect_scale which throw a wrench on the above explanation, but they works as you would expect.
And yes, it is not the easier to use system. Because of that, the designer is being improved for Godot 4 (currently on Alpha 3 at the time of writing).
To answer the question the title: If your stretch mode is set to disabled, and your UI is anchored to the top left (which is the default), you would resize the window and the UI would not scale or adapt to that change. I don't think you don't want the UI to adapt.
Making a top and bottom bars with containers
You can use a VBoxContainer, since we will have three bars stacked one on top of the other, vertically. And yes, the second one is a spacer.
First of all, you want the VBoxContainer to take the whole screen. So set it to the Layout preset "Full Rect". So, yes, we are placing the Container by anchors and margins.
And second, we want the spacer to take as much space as possible. To archive this we set "Expand" flag on size_flags_vertical of the spacer. This is what Size Flags are for.
And, of course, what you place inside the Container might or might not be more Containers.
Making a top and bottom bars with anchors and margins
Give the top bar the "Top Wide" preset. It will set the margins and anchors to have it stay at the top, take the full width, and take its minimum height.
And give the bottom bar the "Bottom Wide" preset. It will set the margins and anchors to have it stay at the bottom, take the full width, and take its minimum height.
You would need no spacer.
And, by the way, I remind you that anchors are margins are relative to the parent. So you can nest this approach. And yes, Controls that are not containers can also have children Controls
About stretch modes
As you know you have a choice between:
viewport: All the sizes will be computed with the original resolution, and then the resulting sizes are scaled to the resolution of the device.
2D: will also compute all the sizes with the original resolution, but instead of scaling the resulting sizes, it renders at that size and scales the image.
disabled: It will compute all the sizes with the actual resolution of the device. No scaling will happen.
Since both viewport and 2D, the size of the UI will not be computed with the actual resolution of the device. This makes the approaches I described to have the UI adapt less effective (less useful or less necessary, depending how you look at it). And thus, if we want to use those approaches effectively we will want the stretch mode set to disabled.
And, of course, there is also the aspect setting.
See also Multiple resolutions and Support multiple form factors and screen sizes.
Designing for small resolution
You can test on the editor how the UI adapts to the resolution, either by resizing the window, or by setting the Test Width and Test Height in Project Settings. You can, of course, also test on an actual smartphone. For instance, I often launch the game in my Android from the Godot editor when developing mobile games.
Circling back to the stretch modes, this is what happens with the text:
disabled: The text stays the same size. This means that the UI can become too small for the text.
viewport: the text scales. This means that the text can become too small to be legible.
2d: the text scales too… except since it is a image scaling it can become blurry, even harder to read.
If we only consider the text, there is no good option. Now, either design the UI for the specific target resolution… Or make one that can adapt. And for one that can adapt, I believe disabled is the best stretch mode as I was arguing above.
And of course you can script it
If you need to run some code when the resolution changes, you can connect to the "size_changed" signal of the root Viewport. And if you need to figure out if the device is in landscape or portrait mode you OS.screen_orientation, and if you really have to, you can create a custom Container.
"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.
I am trying to create a specific solution for weeks now and I have tried many things but I am just not sure if it is possible at all to achieve. I need your opinions and point me in direction o a correct approach. Following what I am trying to create:
Initially there is a tile layout in which a certain number of cards (say 12) are placed in 4x3 grid:
Now, if user clicks on a tile (Box 3), the state changes to following:
Selected tile is expanded and other tiles get aligned one below another on the right side:
Challenge is that I want to create a transition from every tile's initial state to the state where every tile is aligned one below another on the right. At the same time, when a tile is clicked it is expanded in place.
Note - there are no sudden change in positions, no reload of page and preferably no JS (I wanted to write a CSS-only solution). Everything smoothly animates to new position. From the second screen if a different tile is selected (from right), then the expanded item will shrink and go in to the right hand stack while the selected item will expand and take place of the currently expanded (B3).
If you could just point me to correct direction it would be great help.
thanks.
You should check css flexbox.
Using the "order" proprety, you could asign order of every box from 2 to 8,
and each time a box is selected, you change it's order to 1 and you also change its size and colour.
However, I don't think you can use 'click' actions with css only.
I would recommend using JS for what you are trying to achieve.
Hope it helps
This really bugs me - a lot.
After wading through google maps v3 generated client side code in firebug, I'm about ready to drive down the street and give some of these engineers a piece of my mind... arrrgh :P
The infowWindow class produces HTML that personally I would think is simply nuts. maybe someone can help me make sense of it.
The infowWindow HTML structure is like this:
#map_canvas > div > div > div > div > div // 5 levels of elements,
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner
// now comes fun stuff for the speech bubble arrow:
div
div
div
div
div
div
div
div
div
div
// the 10 divs above are stacked diagonally with odd sizes to make this arrow.
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be
able to grab the map even right next to the arrow. Think about this: do users
really need to be able to not grab the arrow? if grabbing the arrow causes map pan,
as is the case for the shadow images, would that really be a problem?
div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container
WOW - thats nuts!
notice there is no real semantic structure, and - gosh, dare I have such an
assumption - no class names anywhere, nothing. I figured maybe they have some
kind of 9-slice box going on and then produce the arrow separately; I mean,
the image sprite in iw3.png sure isn't going to be the problem here.
I dearly hope someone who has an effect on this api comes across this and
hopefully google will eventually find a way to solve this such that custom
infoWindow visuals are as straightforward as markers.
Thanks for tuning in! happy commenting.
meanwhile I shall use a hack to get to these crazy divs and make them do my bidding.
earlier I commented on some other post and I think it shouldn't be too much to ask for a method in the API that lets you use custom UI without resorting to a near-duplication of the whole window object as is currently necessary (see google extension classes v3).
google.maps.infoWindow.setStyle({
'topleft' : {
'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
'width' : '10px',
'height' : '10px'
},
'topRight' : {
...etc...
}
...etc...
})
Have you tried InfoBox?
http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html
or InfoBubble?
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
They both give you a bit more control over the appearance of infowindows, while still abstracting some of the complicated parts.
The lack of classes on elements is a (good) design decision for an API. It eliminates the potential for clashes with user defined classes.
After much trial and eror I decided the best way to resolve this is to use OverlayView class and simply custom build a container. Well, "simply" is an understatement, but it works. And now I have full control over layout and functionality.
You try styling with CSS? The below example shows this. This is the most straight forward way to change the UI.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
I'm programming a debate-graph with Raphael JS. Users can add nodes to the graph. Eventually the graph gets really big and the canvas is still the same size. the canvas (in raphael js: paper) is inside another div with "overflow: scroll;", so lets ignore screen real estate
Is there a way that I resize the canvas without reloading the page (to assign new X/Y values)?
Alternatively, can I create a second bigger canvas in parallel and copying all the elements over? is there a way?
If I understand your question, just call setSize() to expand the size of the canvas to the size needed as you need it. I've used this in a div with overflow:scroll to get the effect you describe.
In my case, I didn't want to resize, I wanted to zoom.
In other words, show the user the growing graph inside a constant-sized div.
So I needed: setViewBox()