Is there an attribute I can use within the bootstrapTable method that will allow me to set the width of the search input?
I would prefer to set the width this way instead of using css styling. Right now my search input spans the entire page. I have checked the documentation below but can't find it.
https://bootstrap-table-docs3.wenzhixin.net.cn/documentation/
$('#quintilesTable').bootstrapTable({
data: formattedStocks,
pageList: [5, 10, 25, 50, 100, 200],
pageSize: 10, //specify 10 rows per page here
pagination: true,
// 12/29/22 EE TODO: is there an attribute to set width of search input
// instead of using css styling?
search: true,
});
Related
Using excel4node lib in order to generate excel docs out of some web tables, is there a possibility to autosize cell when the text is too long to fit it in one cell and to make the width of the cell bigger?
In documentation they have this 2 functions:
ws.column(3).setWidth(50);
ws.row(1).setHeight(20);
But that won't fit the text inside, will just make the cell bigger. Will show example:
and my desired output:
Code for that comment cell:
reducedReport.forEach((element, index) => {
ws.cell(index + 2, 1).string(element["projectName"]);
ws.cell(index + 2, 2).string(element["workerName"]);
ws.cell(index + 2, 3).string(element["comment"]);
ws.column(3).setWidth(30);
ws.row(15).setHeight(40);
ws.cell(index + 2, 4).string(moment(element["date"] * 1000).format("DD-MM-YYYY"));
console.log(element["comment"]);
});
It's about comment column.
This feature is not implemented yet, as exposed in this GitHub issue. In that issue, the author is pointing to an approximation approach used by PHPOffice, to dynamically set the column's width considering the font and the content's length.
you can add alignment settings for cell setting :
alignment: {
shrinkToFit: true,
wrapText: true
}
I am Japanese, and I want to write Japanese words vertically in Fabric.js.
Japanese language has small letters, and the positions of the them are top-left corner in vertical writing.
So, I want to change the position of a small letter in iText.
I thought that I can change the position of a character by using "styles" parameter of iText, so I wrote as follows.
var iTextSample = new fabric.IText('h\ne\nl\nl\no', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
1: {
0: { textDecoration: 'underline', ←★ WORK
fontSize: 80, ←★ WORK
top:-10, ←★ NOT WORK
transformMatrix: [ 1, 0, 0, 1, 18, -50 ] ←★ NOT WORK
},
},
}
});
https://jsfiddle.net/uemon/tLy9eqj6/77/
The 'textDecoration' and 'fontSize' worked, but the 'top' or 'transformMatrix' didn't work.
Can't I use 'top' or 'transformMatrix' in the "styles" parameter ?
How can I change the position of one character ?
Thank you in advance.
So from the use of textDecoration property i guess you are on the 1.7 or similar version.
You should really move to the 2.0 version that has integrated support for multibyte languages and composition.
Said that, there is no support for vertical text in fabricjs at all.
This may change in the future.
You should really go here:
https://github.com/kangax/fabric.js/issues/511
refresh the request and maybe add some detail about it, because the actual mantainer may have no clue on how vertical text should work regarding input, decorations, multiple columns and so on.
I have set up mousewheel support like this:
mousewheel: {
items: 1,
easing: 'linear',
duration: 100,
queue: 'last'
}
The problem is that I would like scrolling by mousewheel to be non-discrete. Atm. the minimum shift when scrolling is by height of an item. I want it to move by pixels continuously.
Not possible. The answer is to use another plugin if you want fluid scrolling, e.g. http://manos.malihu.gr/jquery-custom-content-scroller/
I'm working with a basic Caroufredsel setup with a main image up top, and thumbnails below. My issue is getting the thumbnails to show at the right size whether there's just one, two, or more. I've got it so that it's almost there, with one remaining weird issue.
When the div is shown, the thumbnails don't appear; with the debugger I can see that the caroufredsel_wrapper class has a width of 0, even though I've tried setting it explicitly to 330 in the config. If I resize the browser, then it "wakes up" and the width gets set correctly. I haven't been able to figure out what's causing this.
The config:
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
width: 330,
height: 65,
auto: false,
items: {
width : "auto",
height : "50%",
visible : {
min : 4,
max : 5
}
}
});
Earlier, I had no height/width specified for the carousel, and explicit "width: 150, height: 75" for the items. Everything was rendered as expected, but the width of the items was actually variable so the images were stretched if only 1 or 2 thumbnails were present. Why the explicit item height/width was ignored also remains a mystery.
Any suggestions would be fantastic; it's driving me nuts.
The above comment is correct. If you put the carousel in a hidden div that you later reveal by tabs it will make all the heights and widths to be zero so it will seem like caroufredsel is hidden.
You can attach the update sizes trigger to the tab click. E.g.
$j("ul.tabs a[href=#tab2]").click( function() {
setTimeout(function() {
$("#thumbs").trigger('updateSizes');
}, 200);
});
The delay ensures the container is displayed before updateSizes triggers.
I am trying to understand Qooxdoo.
So, window, using "VBox" layout is working, toolbar too, but the table component
working wrong.
qx.Class.define("tiny.MainWindow",
{
extend : qx.ui.window.Window,
construct : function()
{
this.base(arguments, "tiny")
this.setContentPadding(0);
this.setWidth(400);
this.setHeight(300);
var layout = new qx.ui.layout.VBox();
this.setLayout(layout);
this.setShowMinimize(false);
this.setAllowClose(false);
this.setContentPadding(0);
this.open();
// toolbar and buttons is hidden
// because only table works wrong
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(["ID"]);
tableModel.setData([[0],[1],[2],[3]]);
var table = new qx.ui.table.Table(tableModel);
this.add(table, {row: 1, column: 0, colSpan: 10});
this.add(table, {flex: 1});
}
});
var tiny_window = new tiny.MainWindow();
tiny_window.open();
tiny_window.moveTo(100, 100);
I've got this output:
"The property 'row' is not supported by the VBox layout!"
Table is shown correctly, but vertical resizing isn't changing
table vertical size.
So, what layout types I must use with table component, toolbar?
P.S.: I am already tried "Dock" layout. Here, error is similar: "The property 'row' is not supported by the Dock layout!: The value 'row' must have any of the values defined in the array 'flex,edge,height,width'". Maybe I need other way to define the table size?
just drop the line
this.add(table, {row: 1, column: 0, colSpan: 10});
it is only valid for a grid layout
The optimal layout in your case with only one item in the window would probably be
qx.ui.layout.Grow()