Using Jquery UI's tabs I want to be able to set the tab + tab content views together to be a specific height say 500px. Since the height of the tab section varies by theme and I cannot know what height to use in px for the content view so I cannot hard code it. How do you force the whole thing to a specific height?
Thanks!
Put the entire block inside a div and apply max-height CSS property to it.
Related
I am using Vaadin Flow 14.6.2, the material theme, and custom CSS styling in my application. When loading a grid that has a cell that has content that wraps 5 times, when the grid initially loads the grid rows overlap, truncating the information in the cell that contains wrapped data. Looking at the CSS this is due to CSS "transform: translateY(#px)" setting that is too small onto the Grid's TR (row) tags. As a point of reference, the grid places a translateY of 76 pixels on the second row.
Screen shot of grid with overlapping rows
Selecting a row in the table or resizing the browser will cause the grid to refresh and the translationY value will be recalculated, increasing the translateY value to 118 pixels, and the grid will display all rows with the appropriate spacing.
Screen shot of grid after selecting a row
Is this a defect in the grid where the row offsets are not initially calculated to the correct height?
I am not sure how to debug this further or if there are any workarounds to trigger the grid to recalculate row sizes so that it may display correctly from the start. I tried programmatically selecting the first row and the result was that the first row displayed correctly but subsequent rows were truncated.
I'd try adding a Div element inside the cell using a ComponentRenderer, and put the white-space: normal and word-break: break-word on that element. Since the grid supports adding components of any size, and should adjust row height according to the heighest component, this may trigger initial calculation.
I was able to work around this issue by changing how this page is navigated to. A change was made to a parent view to trigger navigation using an anchor instead of a button. With an anchor a new UI is created and then the grid is added to it, but with the button the existing UI is reused. There is something in the display of the grid on a new UI or something related to the difference in navigation that triggers this problem. Reverting back to using a button is a superior solution as it solves this problem and does not trigger creation of a new UI.
The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
i'm using jquery 1.1.0 and i have a custom header here
i've set the css of this header to be a height of 200px; (i hardcoded it for testing, if i place items in there to make it dynamically get to 200 px, it's the same thing)
the problem is when i transition to another page
$.mobile.changePage("#SurveyCreateView", "none", false, false);
the content on the second page basically ignores the height of the custom header i have. (so the content starts all the way at the top) if i resize the window or if i do a back, and navigate to the second view again, then everything is okay.
anybody have any idea how to fix this?
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives