How to make <a> in table cell height 100%? - css

I have a table with clickable rows using this js:
jQuery(document).ready(function ($) {
$(".clickableRow").click(function () {
window.document.location = $(this).attr("href");
});
but, I have ajax search for data in table and when is table displayed by ajax, js doesn't work any more. So I wrap every content of every with in that ajax table. So it is looks like: http://jsfiddle.net/fo1tvdyf/4/
Width works fine, but height isn't 100% :( Any one have some idea? Sorry for my english.

You need to give your a display:inline-block so it can correctly assume any given dimensions
Assuming your a has the class clickableRow:
.clickableRow{
display:inline-block;
}
Though note that percentage values are calculated relative to the parent container- as such, you may also need to give the encapsulating element a height value.

Related

Overflow to the left?

Is it possible to set a horizontal scrolling feature so that it scrolls to (overflow, I'm assuming, unless there is another way) the left as well as the right. Sort of like this picture:
a horizontal scrolling feature
... except I want to load the object just like it is in that photo but have other objects (images rather than the divs pictured) back behind to the left of that first object), so you can scroll to unseen things in both directions.
EDIT: in response to some of the people offering to help here (thanks), I have composed a fiddle (in the comments below). The hope is that I could load this horizontal feature with the blue-border box at far left (on initial load) and people could scroll back or forth). I'd prefer (but I'll take either one) it to be marked to load on that box rather than css it so it would load after a certain width or something like that, because I want to it to function this way universally (regardless of how many objects are hidden to the left) but, again, I'll take either solution, because I can probably make it work with either.
Here is a quick mockup of something like that. It can be extended to use scroll events. Used jquery but it can be done in pure js too. Just made the body hide the overflow like this
body {
overflow: hidden;
}
I have buttons to move it around but as I said you can do it with scroll events too.
function left () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "+=100px" }, 500);
}
function right () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "-=100px" }, 500);
}
Fiddle: http://jsfiddle.net/hna6jkzk/
And obviously the divs can be images too.
A fiddle with no JS and visible scrollbar: http://jsfiddle.net/hna6jkzk/1/
A fiddle with no JS and hidden scrollbar: http://jsfiddle.net/hna6jkzk/2/

Get HTML Element Height without JQuery in AngularJS

I'm getting familiar with AngularJS. I'm trying to be as 'pure' as I can. For that reason, I'm trying to avoid including jQuery. However, I'm having a challenge getting an HTML element's height. Currently, I'm trying the following:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
console.log(element.css('height'));
}
};
})
;
However, when this code gets executed, an empty line gets written to the console. I'm trying to display the height of the element. Is there a way to do this in AngularJS without using jQuery?
Thank you!
It appears this is working correctly and gives the same result if you use:
element.style.height
Since no inline style or CSS height is set on the element a blank line is shown. Instead of relying on the style you can get the HTML elements height directly.
console.log(element[0].offsetHeight);
http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview
How do I retrieve an HTML element's actual width and height?
The small wrapper around element provided by angular allows you to ask for properties, so:
element.prop('offsetHeight');
Will just work fine, see: http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview

Set vaadin table height to fit contents

I use CustomLayout in my project to separate UI object and their style.
I have some problem with tables.
I define a div and I want the table's height set to div's height.
Which is the best way?
I thought:
table.setsizeFull() ;
table.setPageLength(0);
in the code, but the result is not what I want.
I want the table full sized in div's dimensions, both with or without elements inside.
Any suggest?
I was solving a similar problem: I wanted a table to grow as I added rows to it. I didn't care about its exact height, as long as it showed all the rows of data, and grew as I added rows. I also wanted the table to always show some extra space at the bottom.
The core idea here is that I did three things:
Do not call setHeight() for the table.
I used setPageLength() to define table height by rows--by how many rows high the table should be.
I called requestRepaint() on the element I resized. If I resized a column element, I called it on the column element. If I resized the table, I called it on the table.
Here's a generalized code sample showing how I solved this problem. My code isn't complete, but it might help you get started.
public class MyClass extends Table {
public MyClass(...)
{
this.setWidth("100%"); // fill parent <td>'s width, allows draggable sizing.
// note: do NOT setHeight().
setupColumns(); // details not shown here
setupBehavior(); // details not shown (listeners, etc)
addDataToTable(); // details not shown
adjustHeight();
}
// I also have a function to add rows to the table when
// a button is clicked. That function calls adjustHeight() (shown below).
public void adjustHeight()
{
this.setPageLength(this.getItemIds().size() + 1);
this.requestRepaint();
}
}
[EDIT/FOLLOW-UP] I've found that using this method tends to cause unnecessary scroll bars to be rendered on tables if you are using setColumnExpandRatio() (dynamic column widths). So just as a heads-up, you should use fixed width columns (setColumnWidth()) if you use the trick I showed above.

resize a div after setting innerHTML with mootools

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.

Dynamically Set the Height of Two floated DIVS

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

Resources