I need to place three buttons at the bottom of my page and I want them to be in the left corner, center and right corner respectively. I did create HorizontalLayout into which I added my button. I am fighting with all kinds of alignments for over three days, but whatever I do, buttons remains in the left corner. Here is my code:
HorizontalLayout bottomLayout = new HorizontalLayout();
bottomLayout.setWidthFull();
bottomLayout.setHeight("82px");
bottomLayout.add(buttonA, buttonB, buttonC);
// bottomLayout.setAlignItems(Alignment.STRETCH);
bottomLayout.setAlignSelf(Alignment.END, buttonC);
bottomLayout.setAlignSelf(Alignment.START, buttonA);
bottomLayout.setAlignSelf(Alignment.CENTER, buttonB);
Please do tell me what I am doing wrong and how to correct it.
Also, all my buttons are 80px high and while first two looks vertically aligned to each other, the third one looks couple pixels higher. How do I align them vertically as well?
What you're looking for is bottomLayout.setJustifyContentMode(JustifyContentMode.BETWEEN);
Explainer:
Layouts are 2-dimensional, so the elements in them can be aligned in two ways: horizontally and vertically.
In CSS FlexBox layout model terminology
justification refers to alignment along the layout's direction (horizontally for horizontal layouts)
alignment refers to "cross-axis" alignment (vertically for horizontal layouts)
So setAlignItems and setAlignSelf both refer to the alignment above, wheras setJustifyContentMode refers to justification above.
I have to admit it's really not the most intuitive API. It is like that because it tries to follow the CSS FlexBox model and terminology.
Related
I am trying to achieve a responsive design mechanism using Win Forms C#. The approach I adopted now is to create container flowlayoutpanel then several tablelayoutpanels to it with controllers as showing in the below Image:
The Image shows that the flowlayoutpanel flow direction is set to left to right and the table docked to the top. the table layout controls are anchored top, right left. The problem is when resizing the tablelayoutpanels are stacked vertically but an extra room is created. View Image Two.
I tried to remove the extra space room by anchoring tablelayoutpanels to top, left, right. But did not work. The proposed way is to calculate the offset and do the adjustment. But unable to calculate the offset. How Can I make tablelayoutpanels fills the extra spaces and extend the last tablelayoutpanels width in accordance to other tablelayoutpanels until the extra room fits the tablelayoutpanel from second row. Please Consider that I would like to continue using flowlayoutpanel.
I'm relatively new to Wordpress/Elementor world so I have to search for help.
I need to align the navigation menu that need to have the first letter of the first menu item sticked to the left border of the container and the last letter of the last menu item sticked to the right border of the container.
I need to do that in order to align the navigation menu to the image that is present below it.
In this moment what I have achive using margin is this, but with larger screen the aligment is not mantained anymore.
I tried with the align the first element to the left and the right elemento to the right using justify-content for these elements but this brings to have too much space between the first item and the second one, and the second-last and the last one, as you can see here:
Due to my low experience with css I'm stucked, and I don't know if I have to use another kind of container layout or something else.
Thank you in avdance for any help and I'll be happy to share some other information if needed.
With flex you can use justify-content: space-between to distribute items as you asked.
here you can find a very good guide to flexbox
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...