I have a table with variable number of rows according to data fetched from server
If the table contains more than X rows it becomes scrollable
I want to add "floating" button that either
Acts as a fake last row if theres too little rows to be scrollable
Ovelays last row if table is scrollable
Im doing this in React and im able to obtain coordinates of last row of table
e.g
let nodeBoundaries = document.getElementById('id').getBoundingClientRect()
but im unable to position it with css
what i have tried is something like :
let rect = document.getElementById('lastRow').getBoundingClientRect()
<div style={
{'position' : 'fixed',
'left' : rect.left + 'px',
'top' : rect.top+'px',
'height' : '20px',
'width':'50px',
'backgroundColor' :"red"}}>BUTTON </div>
}
as Tom said, you can try this and if table height is more than X you then can change button style to another property that matches your needs.
I also would like to point you to FLEXBOX . IMO, a much cleaner way to achieve this.
Related
I've been reading numerous articles on side-by-side divs. There's something subtly wrong with what I'm doing that's preventing it from working. Ideally, I want to have my 3 divs appear on one line, each occupying a fixed amount of space. Something like this [15%][60%][25%]
The middle [60%] div is a progress meter bar. I do this by having a div within a div and then using angular ng-style set the expression for the percentage width of my meter.
The progress meter part is working, but I cannot seem to put it all together on one line.
<div ng-repeat="rec in records">
<div>
Items
</div>
<div ng-style="$scope.outerObj">
<div ng-style="rec.innerObj"></div>
</div>
<div>
{{rec.complete}} of {{rec.number}}
</div>
</div>
The $scope.outerObj is just the following expression:
$scope.outerObj = {
'display': 'inline-block',
'border-style': 'solid',
'width': '220px'
};
NOTE - you may ask (like I did), "why can't I just make that outerObj a class and reference it from the outer div like this: <div class="outerObj">? If I do, then the outer div border disappears and you don't get the sense of a progress meter. I could only get it to work by making it also an ng-style.
The rec.innerObj looks like this:
rec.innerObj = {
'width': (rec.complete ? (rec.complete / rec.number)*100 : 0) + '%',
'background-color': 'blue',
'height': '10px'
};
So with all this, I have never been able to get the full combination of what I want:
Item [progress meter] X of Y
I've changed the display from 'inline-block' to just 'inline' and that puts things all on one line, but then my progress meter is all screwed up.
So many tries with different combinations and I've never got it to work, thus turning to the experts here.
Using Bootstrap Grid Layout to show various forms. Cells are assigned width (e.g. 3 of 12 columns) and all of it is configurable. The problem is Label and Field width are supposed to be configured separately. E.g. labelA is width 2, fieldA is width 4, labelB is width 2, fieldB is width 4. This way user will see "2 column" layout: labelA-fieldA-labelB-fieldB.
However there's a problem if user decides to set label and field width to some other value, for example to span all row. User sets label B width to 4 and field B width to 8 expecting it to take whole row. However, in this case he'll get labelA-fieldA-labelB-[empty space for 2 columns] on the first row and fieldB on the second row. Obviously the intended solution would to have labelA-fieldA-[empty space for 6 columns], then labelB-fieldB on the next row. Again, this is all configurable so I need solution for all cases.
A perfect solution would be to have some way to force those cells (label and field) to be non-breakable. Can't find the way to do that.
Another way would be to create a container component with width=label.width+field.width. But then I'll have problems with setting label and field width inside of those containers because I can only set label/field width relative to direct parent and I need to set width relative to the parent's parent. I've heard there are ways to change number of columns in component on render and it'd work if I set number of columns to label.width+field.width. But as far as I understand it's a dirty solution.
The code is in React and this is what's generated for each label and field. InpComp may be any component, doesn't matter in the end. labelWidth and fieldWidth are set by configuration.
const labelWidth = this.getLabelWidthFromConfiguration();
const fieldWidth = this.getFieldWidthFromConfiguration();
return (
<div className={'component-container'}>
<div className={'col-md-${labelWidth}'}><b>{this.field.attributes.label}</b></div>
<div className={'col-md-${fieldWidth}'}>
<InpComp />
</div>
</div>);
What can I do to this code so that those label and field always end up on the same row?
what about an if-statement? ;)
you can do something like this:
if (lableWidth + fieldWidth !== 6) {
fieldWidth = 12 - lableWitdh;
}
This solution only works for one case (LA+FA = LB+FB = 6). You could set a condition for each case by your own using if/else or switch-case.
Like Troyer said, we're not here to show ideas or do your work, we are here to fix code problems. Next time you should try to solve your Problem by your own until you get in stuck and then provide your Code.
I have 2 different tables. Both the tables varies in the number of rows it have. I need both the tables to be displayed of the same height..
I want the 2nd table rows to be adjusted in such a way that it too expands to the same height as 1st table.
use
$("#div2").height($("#div1").height());
for load the correct height on the second div
and on the second table add
style="height: 100%"
demo
First of all you need to see witch one of those tables have a bigger height and after that you should make the other one like it.
Considering that both of your tables have a class called for example mytable, the script you need to load after the document is ready is this:
var heights = $(".mytable").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".mytable").height(maxHeight);
Use bootstrap classes
row class and col class.
You can go check this sample
i don't need any calender, datepicker, or timepicker.. i just want to know...
Can somebody please tell me... how the divs come to appear when user clicks on some specific text fields...
see on this link..
http://pttimeselect.sourceforge.net/example/index.html
i dont' want to show calendar or time picker.. but may be some images with some details.. that is not a part of question.. i just want to show some div with "blabla" data...
Thank you
Oh.. i found it..
I got it.. in jquery i found a method of "offset();" that further give me its' left and top values..
.. Thank You
ALHAMDULILLAH
Well, the best way I can think of is to use JQuery and generate the div on the fly when your element is clicked.
The div should be absolutely positioned and set to display: none (if you want the slide down effect). This is a quick sample I made for showing the div:
$('.moreInfo').click(function(){
var data = "Whatever data you want to show in the div";
var div = $('<div />').text(data)
.css('display', 'none')
.css('position', 'absolute')
.css('top', $(this).outerHeight() + $(this).offset().top)
.css('left', $(this).position().left)
.css('width', '200px')
.css('height', '300px')
.css('border', '1px solid #000');
$(this).after(div);
div.slideDown(500);
});
(The CSS may as well be a separate CSS-rule and modified however you want, except for the 'top' and 'left' attributes)
This opens a new div for every click, so you probably want to check if the div already exists and then remove it.
The easiest way would be to define functions for the input field on focus and blur:
<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>
EDIT: Here's some psuedocode to get you started
//This will give you the distance from the top of the page to the input box
inputTop = inputElement.offsetTop;
//This will give yout he height of the input element
inputHeight = inputElement.offsetHeight;
//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;
//Now show the content div
contentDiv.style.visible = "true";
CSS3's column-module allows you to divide your text into a multiple columns. Either by
1) specifying the column-height property (all columns will have the same author-defined height, the column count is dynamic)
or,
2) specifying the column-count property (all columns have the same computer-generated height, the number of columns is defined by the author).
What I would like to have is option 1, but instead of having the columns next to each-other I'd like to have them underneath each other. This way they wouldn't really be columns, but more like rows with a defined height.
This way the text will be divided into pages of all the same height. (Like when you print out a webpage.)
Any ideas on how to achieve this? ( My project only requires webkit-support. )
The column module won't do that. You would be better off declaring a class on a div with the a declared height. If you're looking for dynamic columns, you may need to do some programming via js or php.
By the way, I did play with the following idea which sort of works:
Use a multi-column DIV to split the text into different same-height chunks.
Copy the multi-column DIV X times, where X = number of generated columns.
On each DIV, only show one column. (by using overflow: hidden and a width)
Position the columns so they are underneath each-other.
This works, but is VERY slow as you can imagine.
Perhaps there's a way to show the same multi-column DIV multiple times with different view-ports, without copying the whole DOM tree?
JS seems like the way to go. Check out this jQuery function from the Filament Group. Masonry might be of interest too.
// make columns equal height
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}