Once the page initializes, I can't find a way to resize the height of a vertical panel. If I select the split pane component with jquery and set a min height the component does not respond by resizing its separator or internal panel. Is there any way to change the height of a vertical panel dynamically after the initial page load?
Found a way, just needed to target .v-outer instead of the actual container.
Related
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I have a simple page with a fixed sidebar (navigation) and a content area that scrolls normally. Sidebar position:fixed, content area normal.
The sidebar (if taller than the browser) uses a scroll bar to show the rest of the sidebar content. Thats cool, it works like its supposed to.
I'm trying to get the sidebar, onload, to set its height as tall as its contents, so there is no scrolling. So if the sidebar is 2000px tall with all the content loaded in, onload the height is set to 2000px so there is no scrollbar. It will just make the fixed sidebar 2000px high.
Is this a min-height issue? I feel like there is a simple way to do this but I have been at it so long I cant figure it out. Ive used scrollHeight, height(); etc. and cant get a solution.
Thanks
Remove the css height to allow the div to expand, set overflow:none;
Otherwise similar questions and answers here:
Make div 100% height of browser window
This is what I understand from the question, since there is no code submitted.
If you "mesure" contents height after pageload, you can set your sidebar height to this value.
document.ready(function(){
contentHeight = $("#content").css("height");
// set sidebar height
$("#sidebar").css({"height":contentHeight});
});
Place it at the end of the page, so it will be executed after pageload.
I'm not sure this will remove the scrollbars, since it appears when height is more than viewport.
You'll have to set css for the sidebar to overflow:hidden.
I am trying to use bxslider to make a full-height slider that is dependent on the browser window, so the entire slide is always showing.
As it is now, it is adjusting its width based on the browser window, but I can't get it to adjust its height.
Do I have to somehow adjust the image height itself (within the slide) to be based on the browser window?
Is there another slider plugin I should be using for this?
Thanks in advance!
I have a <div> container whose size varies based on it's content.
This content is loaded dynamically via ajax while the user is interacting with page and also based on screen size (for example, resize of the window will affect the content height).
There's a sidebar which is using the affix plugin positioned at the left of my main container.
I want to check if the height of the sidebar is bigger than the content panel and based on that, set affix plugin or unset it!
I tried attrchange plugin but that's not exactly what I'm looking for because i never set an explicity attribute value to the element that I'm trying to monitor. The element height varies based on it's content which doesn't trigger any change event!!
Do I really need to be polling my element to check if there's any change on it's height?
Check this out. http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
The implemention seems to use a settimeout to watch the attribute change
I have a page with multiple widgets which each display data from different services.
I want to set a loading overlay on each widget independently when the data for that specific widget is being loaded. The widgets don't have a set height or width. I am using Bootstrap's grid to structure the layout.
Basically, once I need to load data, I'm appending another div with opacity to the widget root div, and positioning it absolutely with top/left 0.
The width and the height of the overlay are currently calculated using jQuery's innerWidth method on the widget root div. This makes the overlay the same size as the actual widget.
My problem is that when I resize the page while the overlay is being shown, its width and height are not recalculated, while the widget dimensions are. I end up with an overlay div that is larger than its parent.
Is there any way I can solve this using CSS alone (i.e. without binding to a resize event)?
I need to support Chrome, Firefox and IE9+, so I'm open for any modern techniques.
Just try % on the overlay without the Jquery function :
.overlay {
width:100%;
height:100%;
}