I really like tabulator but cant seem to get it to adjust to the height of the device. If I fix a height
e.g.
var table = new Tabulator("#example-table", {
height:"600px",
If obviously looks bigger on a mobile etc
Is there a way of making the table 90% or whatever of the window height ?
cheers
you can set the height as a percentage:
var table = new Tabulator("#example-table", { height:"100%",
The height property will take any valid CSS height value
Related
I have a horizontal bar chart that is too tall for the page (i.e. the user has to scroll down to see the full chart) and there is only 4 bars on the chart.
I can reduce the widths of the bars successfully, by using either barThickness or category and bar percentage. The problem is this does not reduce the overall height of the chart, as it just creates more space between each bar.
How do I reduce the width of the bar AND the overall chart, so the user does not have to scroll?
Thanks
Set the height of the chart canvas element, either by specifying it directly in the canvas tag or by specifying max-height in CSS.
Relevant links:
https://www.chartjs.org/docs/latest/#creating-a-chart
Setting width and height
I managed to fix it, using a suggestion from another post. In the following code snippet, I added the line that set the canvas height:-
$("#dvChart5").html("");
var canvas = document.createElement('canvas');
canvas.height = 100;
$("#dvChart5")[0].appendChild(canvas);
I neeed to create xls file in write-only mode and customize rows height. But rows height stay by default if i use write_only=True.
row = []
book = Workbook(write_only=True)
sheet = book.create_sheet()
cell_1 = WriteOnlyCell(sheet)
# styling and filling cell data
row.append(cell_1)
cell_2 = WriteOnlyCell(sheet)
# styling and filling cell data
row.append(cell_2)
sheet.append(row)
sheet.row_dimensions[len(sheet.rows)].height = 30
Without write_only all works perfect.
Must be done before any cells are added. See the warning section at the bottom of openpyxl.readthedocs.io/en/latest/optimized.html
Row and Column Dimensions are not available in write-only mode.
I'm trying to build a calendar in which I need to insert different lists for each day. I figured the collection view under each label of a number in the month would be the best and it works so far. I only have a problem with adding new items to the collection view. It's not growing, I have to scroll down.
I'm looking for a solution that could give the possibility to dynamically extend the height of the collection view without touching the height of the items. As there are 40 "mini" collection views on the page, I need to be able to grow the height of all the collection views at once, without having each one of them growing above the text beneath.
Here's my code for the viewDidLoad:
houseNameLabelList = [[NSArray alloc] initWithObjects:#"House 1", #"House 2", #"House 3", #"House 4", #"House 5", nil]; // The array of the titles I want to display
NSInteger rowCount = [houseNameLabelList count];
CGFloat height = rowCount * 17; // 17 is the height of each item in the collection view
self.myCollectionView.frame = CGRectMake(self.myCollectionView.frame.origin.x, self.myCollectionView.frame.origin.y, 45, height); // 45 is the width of my collection view
Of course I have delegate and datasource set as "self".
The initial height of the collection view is 51 (3*17 which means 3 items), and I want it to grow to 85 (5 * 17 for the 5 items in my array).
How can I do that ?
Thanks for the tip
When adding a new item, the collectionView.contentView.bounds is changed.
I think you can expand the collectionView through call collectionView.bounds = collectionView.contentView.bounds
I created a web service and had imagefield from the sitecore6.6. Now i am want to change the width and height of image dynamically so that i have big image on the fly. There are almost 1000 pictures which require size change . Any help...
You can use several query string parameters in the url of the image to let Sitecore modify the image. The image has to be a Sitecore Media item.
Here is a list of the supported query string parameters:
w: Width in pixels
h: Height in pixels
mw: Maximum width in pixels
mh: Maximum height in pixels
la: Language (defaults to context language)
vs: Version (defaults to latest version)
db: Database name (defaults to context database)
bc: Background color (defaults to black)
as: Allow stretch (as=1)
sc: Scale by floating point number (sc=.25 = 25%)
thn: Thumbnail (thn=1)
dmc: Disable media caching, both retrieval and storage (dmc=1)
In your case you can use for example the ?as=1&w=600 to get the image resized to 600px width.
You can also do this programmatically to set the MediaUrlOptions when creating the mediaUrl:
var mediaOptions = new MediaUrlOptions {AllowStretch = true, Width = 600};
var mediaUrl = MediaManager.GetMediaUrl(mediaItem, mediaOptions);
I have a GridView that displays data in up to 30 columns. Sometimes this has the effect that the gridview expand to a width that requre a horizontal scrollbar but not always. The length of the data in the columns also vary and I don't want to set a specific width, it's nice that the grid is small if half of the columns are empty.
The problem is when I enter edit mode, labels gets replaced by textboxes and those take up more width and the whole table resizes itself.
Is there any way I can keep the item template and it's labels without a fixed size but at the same time always make sure the edit template will have the same size.
I was thinking about something like this:
On "enter edit mode event"
EditTemplateTextBox.Width = CurrentItemTemplate.Width;
I was able to keep my GridView from resizing when switched to edit mode (except for the new "Update" and "Cancel" columns that get added) using this CSS:
table input
{
width: 95%;
}
You can use 100% if you want, but 95% gave a little bit of spacing between the cells.
Also, if you have other tables on the page that you don't want to be affected by this, give your GridView a CssClass and replace 'table' with the name of your css class like so:
<asp:GridView ... CssClass="myGridView">
.myGridView input
{
width: 95%;
}