How do I change width of this drop down menu, as you can see it's too small. When I select 10, it's not visible
I found the solution, had to change css like this
div.dataTables_wrapper div.dataTables_length select{
width:50px;
}
Related
I have created settings.scss, and I have achieved to set button size with this
$typography: ('button': ('size': 14px))
and with this
$button-font-size: 14px,
But what should I do to have font size different for different button sizes?
PS. In Vuetify 2 I have used this
$btn-font-sizes: (
'small': 13px,
'large': 14px,
);
The SASS now uses a relative scaling function for button height, font-size, width-ratio, padding-ratio based off the default button size settings. With this setup you can can achieve a relative scaling of button size related CSS props using settings.$size-scales:
In your settings.scss:
#forward 'vuetify/settings' with (
$size-scales: (
'x-small': -0.7,
'small': -0.2,
'default': 0,
'large': 2,
'x-large': 10
)
);
The advantage to this approach is convenience, and that you can easily add custom sizes like xx-small or whatever. However, if you only want to change font-size and not other properties you have to target each button size in CSS:
.v-btn--size-x-small {
font-size: 8px;
}
Of course, you can use the class names to target any property of buttons and avoid the settings altogether.
I try to change the row height of the table with css
http://jsfiddle.net/aep5bo3r/1/
I added this to change the row height.
#basic_example td
{
height: 15px!important;
line-height: 15px!important;
font-size: 10px;
}
The rows height is smaller, but now the scroll is .. jumpy?
With the default row height the cells are added nicely when scrolling, but if the rows are smaller, it won't add new rows until you scrolled past a certain portion.
I guess the javascript part doesn't like the new change.
If you can help me solve this, having smaller row height with an working scroll, it would be nice.
Thanks;
If I understand well so your problem will be solved if we add renderAllRows: true to your settings option when creating Handsontable object.
var hot = new Handsontable($('#tableContainerId')[0], {
...
renderAllRows: true,
...
});
I have a new window with undefined size. How to place it into right bottom corner in the page? The getWidth() and getHeight() functions return -1, because I didnt set them by setWidth() and setHeight(). I dont want to set them to keep the size depending on the content.
You can use Window.setPositionX() to change the horizontal offset from the LEFT border, and setPositionY() for offset from TOP. Unfortunately there is no way to set offset from RIGHT/BOTTOM. So unless you know the width/height of both your window and the main window, this is not possible through Vaadin server calls (as far as I know).
However you can solve it through CSS: define a style name e.g. mywindow using addStyleName("mywindow") and then make a CSS rule like this:
.v-window.v-widget.mywindow {
right: 0;
bottom: 0;
left: auto !important;
top: auto !important;
}
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
Can you guys please let me know what is the best way to disable the horiontal scroll bar?
I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.
Btw I am using jscrollPane.
Any suggestions would be appreciated.
What I have found in jScrollPane - settings object documentation:
contentWidth - int (default undefined)
The width of the content of the scroll pane. The default value of
undefined will allow jScrollPane to calculate the width of it's
content. However, in some cases you will want to disable this (e.g. to
prevent horizontal scrolling or where the calculation of the size of
the content doesn't return reliable results)
So to get rid of horizontal bars, just set content width lower than the container width.
Example:
$('#element').jScrollPane({
contentWidth: '0px'
});
The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)
In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.
contentWidth: '0px' fixes the both symptoms.
However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1
This is quite outdated question. But in case someone has same issue as you and I:
as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:
.jspHorizontalBar { display: none !important; }
Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.
Pass horizontalDragMaxWidth: 0 to the options.
None of the solutions worked for me here so here's what I did using nested divs:
JS
$('#scrollpane').jScrollPane();
HTML
<div id="scrollpane" style="max-height: 400px; width: 700px">
<div style="overflow:hidden; width: 650px">
Your long content will be clipped after 650px
</div>
</div>
I was able to accomplish this using CSS.
Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it.
It will still work if you have set the vertical and horizontal on the same page.
div.horizontal-only .jspVerticalBar { display:none; }
After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:
pane.css('overflow', 'auto');
// Hack: Combat size weirdness with long unbreakable lines.
pane.css('position', 'static');
// End hack
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
// Hack: Continued.
pane.css('position', 'absolute');
// End hack
pane.css('overflow', '');
Not sure how safe it is but that works for us.
For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}