I couldn't understand one of the principles of Material design.
On a desktop when I have a left bar list (1/3) and content (2/3) I want to add a + button.
When it should be at the top of the page and when it should float at the bottom right?
Related
Is there a way, to setup Layout on declarative way for next scenario:
Desired Layout:
Header, Footer, Nav are ok.
Problem is how to setup content to work on a responsive way, and in the same time to cover some scenarios:
Big Screen
Widget 1 should fulfill section 1, in case the content of Widget 1 is longer than section 1 - the scroll bar should be visible just on Widget 1
Inside a section, there could be more than one widget. It should have option for example in Section 2 to say those two widget should be 50%-50% or any other proportion. If content of any widget is longer - the scroll should be on widget. or to don't have proportion, just list of widgets - in that case scroll should be on Section 2 (if content of all widgets is longer than section 2)
Small Screen
Section 2 should go below Section 1. Now, "fill section space" and proportions, probably does not make sense, and probably each widget should have some "max-height" settings
Thanks,
Misa
In our PSI data we are seeing some pages with outrageous CLS numbers which we cannot reproduce or make sense of. In fact, here is an example of one page that has 2.52, but I did not even think it was possible to get over a score of 1.0, which would be a complete shift of everything on the screen, am I right? And is there some problem with the data/chrome, because this is not an isolated incident...our site pages suddenly started suffering terrible CLS data about a month ago and we are bewildered, in Core Web Vitals area of GSC.
Look in the Field Data at the CLS...2.52, but the lab data is .044. PSI Link
Why the difference between lab data and field data?
CLS in the lab tests (synthetic tests) is purely for initial page load and above the fold.
CLS in the field data (real world) is measured from the second the first (well technically second) paint event right until page unload.
So if there are layout shifts happen as someone scrolls the page those keep adding to your CLS.
How can I have a CLS greater than 1?
Imagine you scroll the page and the scroll bar suddenly appears, that would shift the whole page. Now CLS is based on the percentage of the page that moves. So if the whole page shifted to the left by 10px you would get a Layout Shift of almost 1 (think of 1 as 100% of the visible page, 0.5 would be 50% of the visible page moved etc.).
Let's assume that as you scroll the page further the scroll bar suddenly disappears, the whole page now shifts to the right by 10px. This would result in an additional Layout Shift of almost 1.
Now you have had two Layout Shifts of almost 1 - your Cumulative Layout Shift would be almost 2.
I have simplified how layout shift is calculated but I think the principle is easier to understand with the above example.
Real User Metrics (RUM) are the way to capture these sorts of issues.
As for CLS data suddenly changing, I would recommend using something like the web vitals library to pipe the data to either a custom backend or to your analytics so you can see if this is a specific device, screen size etc. causing it.
Spotting Issues with Developer Tools
To see layout shift regions, go to Developer Tools - > Rendering -> Check "Layout Shift Regions" and then load the page a few times, resize it etc.
The only thing I could see is that your mobile menu has some very strange layout shift regions that are particularly bad at large screen sizes. Other than that there is a massive shift when the page loads but that shouldn't take it over 1.
I know the problem is on desktop but I can't remember if they put tablet data in the desktop or the mobile field data...if it is desktop then you may have your answer!
I'm trying to use the "snap to grid" feature on Enterprise Architect Diagram mode and it seems like it's not working. All elements and connectors didn't snap to the defined grid size (they still moving freely - pixel by pixel - when I drag and move them).
Does somebody know how to snap all elements and connectors to grid or, at least, to move the connectors pixel by pixel - like elements do when pressing SHIFT + arrows?
for that you should use 'Snap to Grid' option from 'Diagram' menu.
There you can select one of two options: 'Standard Grid' and 'Smart Placement'
Documentation says:
Standard Grid - constrains elements to the grid when they are added to diagrams
Smart Placement - places elements even distances away from other elements and spaces elements evenly
If neither of these options are enabled, the elements can be placed freely on the diagram.
Ensure that you have that option enabled
If it is not working try to reload diagram after point 1
BTW. For alignment elements on a diagram you can use more options from context menu (select elements and click right button):
I have a UITabBar app that I build using xib in IB. In my view on IB, it has the bottom bar. In the following image, the bottom bar is just under the UIToolBar. It is under the toolbar, because I have no option to put it on top of the bar.
When I run the app, the toolbar appears in the middle of the screen as shown here. How can I fix that? I want it to be between the tab bar and the web view.
You need to set some Auto Layout constraints or an autoresizing mask in Interface Builder to tell your toolbar how to position itself.
Update: Assuming I understand what you're trying to do, try these constraints:
Web view: 0 distance from top and sides, (height of tab bar + toolbar) from bottom.
Toolbar: 0 distance from sides, default (or some constant) height, (height of tab bar) from bottom.
Tab bar: 0 distance from sides, default (or some constant) height, zero distance from bottom.
I have a ScrollPane in my scene and would like to add a series of Nodes to it. The exact amount must be dynamic. I've been testing the concept with Label nodes and can successfully add as many Labels as I want to the content of the ScrollPane (currently a VBox).
My problem is figuring out how to allow the user to scroll normally through the ScrollPane full of Nodes. The content matches pace with the scrollbar; that is, when I scroll down, the content moves down. I scroll up, the content scrolls up. So if I have 10 Labels, only five of which are currently visible, the instinctive action to see the other five would be to scroll down. Unfortunately, this just moves the entire content down, exposing empty space up top and hiding more of the Labels.
I can post some sample code if that helps, but the gist of my plan of attack is this:
ScrollPane sp = new ScrollPane();
VBox content = new VBox();
sp.setContent(content);
for (int i = 0; i < 10; i++)
{
Label label = new Label("Label " + i);
content.setPrefHeight(content.getPrefHeight() + label.getPrefHeight());
content.getChildren().add(label);
}
Because I use a VBox, the Labels are stacked (in the Y axis) atop one another, which is what I want. As more Labels are added, the ScrollBar needs to reflect the increased size of the VBox.
I've tried a few approaches to get this to work, including ScrollPane.setVmax() method, which is ok, but I still have the issue of the scroll direction moving the content in the wrong direction. I've also tried an EventHandler and EventFilter to modify values accordingly, still without solving the problem of scrolls not moving the content in the right direction.
The answer seems so simple, yet the it continues to evade me, even after many long hours messing around with the code.
EDIT:
jewelsea's suggestion of using a ListView solved my problem. However, I remain curious as to why using a ScrollPane did not fare so well. Additionally, I've run into odd behavior with the ListView implementation: I use a button to manually add a new Label to the view. Every now and then, the view will freeze up after adding a new Label. It locks up for a few seconds before either updating the scroll position or displaying the newly added Label. I don't know if this is because there are about 20 or so Label instances being managed by the view or if something more insidious is at play.
In regards to the scrollpane issues, I know what you're looking to do is possible because I'm doing something very similar. Based on the code snippet you gave above I would suggest trying few things...
Give the ScrollPane a preferred height and width to follow.
Don't give the content VBox any height sizing preference as it will grow with its contents. There should be no need to update its height after adding content either.
Use the VBox's setAlignment method to align its contents either TOP_LEFT, TOP_CENTER, or TOP_RIGHT.
Be cautious when using the getPrefHeight() method because if you haven't used setPrefHeight() beforehand I believe it will return -1.
Hope this helps you out!