I'm using Eonasdan/bootstrap-datetimepicker inside a <table/> and it works perfectly in some rows, however in the last rows the datetimepicker popup doesn't show in the right place where it should be.
Here's an image that illustrates the problem
And here's JSFiddle where you can try it out.
Apply position:relative to the <td> of your table. will solve your issue.
Here's updated fiddle https://jsfiddle.net/znLmpgz7/1/
.table td{
position:relative;
}
I have solved the issue by adding position:relative; rule to .bootstrap-datetimepicker-widget class in bootstrap-datetimepicker.min.js. and i also have some top position issue so i just set "top:0px !important" in css.
Related
I want to add a row hover to the Webix datatable using hover property, but it doesn't affect to the selected row by default.
I've tried to modify the :hover of the selection class, but the current notation works only for the hovered cell (while I need a hovered row):
<style>
.bluehover{
background:lightblue;
}
.webix_row_select:hover{
background:lightblue !important;
}
</style>
Snippet here.
Will appreciate any help.
Just change
.webix_row_select:hover{
background:lightblue !important;
}
to
.webix_row_select *:hover{
background:lightblue;
}
Updated snippet
I think the solution from #aisah is not up to date anymore.
Under webix 8 one only needs to set hover:<css_class> and define
.<css_class>{background: <my_color>;} without the hover selector.
Snippet
Webix Documentation
When I use cellClass and color entire column, the row border becomes invisible. Here is the plunker. http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview .Can someone help me.
Simply add something like:
.ngCellText{
border: 1px solid rgb(212,212,212);
}
to your last loaded stylesheet.
style.css in this forked Plunker
again, I'll have to start with saying, that I'm no CSS pro here, but I think the 'issue' is caused by the included angular-ui stylesheet.
They probably have their reasons for it but here is what's causing the missing border:
class .ngCellText adds a padding of 5px pushing the bottom border out of sight.
Attached a screenshot for better understanding:
I would suggest to look into the angular-ui documentation and see how they recommend using it for similar usecases, but as a quickfix try decreasing the padding:
There is probably also a lesson about border-collapse to be learned here.... but as said I'm no css pro and I'm too lazy to look it up :P
Hope this helps, a bit
I am building an dynamically created gallery, where ajax/php fetch some images and then load those images into a dynamically created table. I have a set width for this table and I want the overflow only in the x direction. The issue is that the table row (tr) seems to wrap itself. I have tried using the css overflow-x property, I have tried manipulating the table width (which is inside a div), and I have tried using css to turn off wrapping. None of this helps and the table scrolls vertically instead of horizontally. Any help would be much appreciated. Thanks.
Here is the table structure:
<table><tr><td><img style="width:100px;"/></td>...(many more columns)...</tr></table>
I'd recommend to use <div>s.
Try something like this:
HTML:
<div id="gallery-wrapper">
<div><img src="..." /></div>
...
<div><img src="..." /></div>
</div>
css:
div#gallery-wrapper{
width:100%;
height:100px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
}
div#gallery-wrapper > div{
display:inline-block;
width:100px;
height:100px;
}
P.S. There are actually many other ways to do this.
This is an example of using a table in the wrong context and why it's not recommended. If you absolutely must use the table layout then put the image in a div inside the td and set the divs overflow.
<table><tr><td><div class="imageDiv"><img style="width:100px;"/></div></td>...(many more columns)...</tr></table>
.imageDiv{overflow-x:scroll;}
I would recommend you to use the jscrollpane that is jquery plugin.
http://jscrollpane.kelvinluck.com/
Set the width and overflow not for the table, but for a div around the table, so that the table can be scrolled inside this div:
<div style="width:1000px; overflow-x:scroll;"><table>...</table></div>
I want to create a table like structure without using table,tr,td etc tags. The table should have its first column and headers fixed. I have fiddled it under this URL: http://jsfiddle.net/RtfZu/.
I am not able to create a vertical scroll-bar, which upon scrolling should scroll the frozen column too.
Any insights?
You need to make your .table-body-scroll div scrollable. In the fiddle it breaks due to the a width issue causing a double scroll bar, but you should be able to fix that by adjusting the width and setting the overflow-x to hidden
.table-body-scroll
{
overflow-y:scroll;
}
http://jsfiddle.net/RtfZu/3/
Try adding overflow-y: auto; and define a height to your .table element. This should scroll the entire table
By the way, i have created a jQuery plugin that would render table using tags. The table is configurable too. code4devs.com is the URL
I want to create table with fixed header. And scroll tbody left and down. If I do thead and tbody as blocks (set style display:block and position:relative) it works for me in all browsers except IE. For IE I need to set position:fixed. But if I use position:fixed after dynamically adding new row the scroll position is reset.
Example: http://jsfiddle.net/9nezW/33/
How can I make tbody scrollable with use position:relative in IE?
Thanks
Try setting overflow: auto in the tbody's css.
An example I found here: http://monolinea.com/clients/csstests/tablescroll.html has a table that works in IE, still trying to figure out the differences between mine and theirs. May help you to take a look at it's source.