The coding is done using VS2008
There are two divs in my page namely "dvLeftContent" and "dvRightContent".
I cannot statically set the height of the pages since "dvRightContent" have variable heights on various pages (Master Pages are used here)
Is there a client side function(javascript or jquery) that takes the height of the right div and assigns it to left div?
Using jQuery:
$("#dvRightContent").bind("resize", function(){
$("#dvLeftContent").css('height', $("#dvRightContent").css('height'));
});
There is also a jQuery plugin which does the job for you: Equalize
It handles both the scenario where rightcol is larger then leftcol or where leftcol is larger than rightcol. It also allows you to specify which element inside either leftcol or rightcol should get the space added.
Thanks micahwittman. Some minor changes
$("#dvRightContent").resize(function(){
$("#dvLeftContent").css("height", ($("#dvRightContent").attr("offsetHeight") - 250 ) +"px");
});
Its because height will give only "auto" in this case as its set like that
Related
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I have some problem. I tried to position the title over the image
first title (cat1) can be small or long
second title (cat 2) juste after the first title
third title (after the 2nd title to right)
these title must be on inline
see my demo jsfiddle http://jsfiddle.net/cyphos/jntea/]
thank you for your response
As I understand it, how you accomplish this depends on what you are OK with creating. If you can specify the width of each element, then it isn't a problem to accomplish. You could then simply specify widths for both the left and right elements, then position the center one directly in between. See this fiddle as an example:
CSS only Fiddle
This uses the box-sizing border-box model to simplify things. Read this for clarification
basically:
.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}
OR
if you want these items to be dynamic, you will need to use Javascript/jQuery to get the width of the elements and then set the left and right properties of the center one accordingly. An example in jQuery
jQuery based fiddle
var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);
With this, you will have to then add the padding values to the cta1Width variable, as jQuery does not return a width value that includes the padding. Either do this manually (by adding the pixel value yourself), or you can also extract the padding width with the jQuery see this thread for info
I am using mootools 1.2 in a simple page. There's a div that displays a form (call it formdiv) that gets submitted via JS/ajax. The ajax request returns some data "confirmation message".
However, the formdiv div starts out maybe 500px high to accomodate the form elements. When the ajax request returns a variable-length return data ("confirmed for submission!") the div stays 500px high, leaving a lot of extra space.
My question is, is there a way to snap the div back to fit the new content after updating the content using innerHTML?
Thanks
EDITED: to add that the data returned by the Ajax call could be variable length-- so I can't assume it'll be a certain height and then reset the div to that height.
If your div starts off with predefined height using CSS then all you should do is set its height to auto or clearing styles altogether when they were set inline.
Check this JSFiddle (it works with jQuery here, but that doesn't matter when it comes to browser rendering div in question)
Okay I realize that this is like a year late but I came across this question while attempting to find a script to do just this. This was a great starting point but I felt like I should share the method I choose to use:
Get the current actual height of $('element').
h.before = $('element').getSize().y;
Fx.Morph can't handle setting the height to 'auto' so first you must set height: 'auto' on $('element') (in case it hasn't been already) and then set the html to the new content. This will allow you to get the new content's height.
$('element').setStyle('height', 'auto');
$('element').set('html', "Some other content.<br/>Very short.");
h.after = $('element').getSize().y;
Reset the height and then start the Fx.Morph with h.after.
$('element').setStyle('height', h.before);
var myEffect = new Fx.Morph('element', {
onComplete: function() {
$('test').setStyle('height', 'auto');
}
});
myEffect.start({'height': h.after});
You can check out the full code here: http://jsfiddle.net/cd4R9/
Please understand this is method is very basic and a lot would have to be done to make this site-ready. For example if your $('element') has padding, you will have to account for it or use the CSS property box-sizing: border-box;. Hope this helps.
I am trying to increase the height of container with increase in the number of contents inside the container.
Like in my case i m using tileList inside tabNavigator , when I put contents inside the tileList, the height of tileList does not increase
beyond vertical height of the viewport. It puts scrollbar on the container. I want to increase the height of an flex container with increase in the contents and introduce
scrollbar on the browser with increase in contents in the flex container.
Could anybody please suggest me how I could achieve this.
Thanks in advance.
You need to write a javascript function which increases the height of embed object and you need to call this javascript method from flex while adding a new item to tile list.
This link explains how to access javascript from flex.
Have considered using javascript and resize the element directly in the source HTML?
The JS code could look something like that:
function changeSize(id) {
var flex = document.getElementById(id);
flex.setAttribute("width", "800");
flex.setAttribute("height", "600");
}