I'm using PrimeNG and p-dropdown to show a bunch of filtering options. However, in trying to make things responsive, p-dropdown seems to be fixed to a min-width of content and I can't seem to override it so that it might ellipsis the content or truncate it, etc.
This is the image before making the display narrower:
And this is what it looks like if I resize my browser...
If you notice, the cost center drop down sized to min content, but nothing smaller.
If I replace the dropdown with an input box:
I've tried a few different CSS options to no avail.
[style]="{'minWidth':'20px'}"
I have it working fine going the other way, it sizes to correctly when going wider, just not narrow.
So what did I miss?
Thanks,
Nick
I believe for this to work, you need to set the autoWidth field to be false.
For example:
<p-dropdown
[options]="cities"
[(ngModel)]="selectedCity"
optionLabel="name"
optionValue="code"
autoWidth="false"
[style]="{ minWidth: '50px', width: '50%' }">
</p-dropdown>
This gives me the following:
Stackblitz for reference
Related
Is there a way in Vaadin 7 or Vaadin 8 to move the save/cancel buttons to under the last editor column? Or maybe to left justify them? Right now they are right justified under the last column. I would even take left justifying them under this same column. Visually, it is far from the last thing the users edited, so some users get confused. The way I am clarifying it for users right now is by making the Grid as narrow as possible, but it wastes screen real estate.
This will be very difficult in generic case, where column widths can be freely adjusted or their widths are automatically calculated by content. However if you set your columns fixed widths, so that you can make assumptions based on that within your specific application, there is a solution.
Just noting, that the Editor has div, with class name "v-grid-editor-footer", which has the same width as the Grid. So the editor footer does not have logical cells, that would be aligned with Grid's cells. And that is the challenge here. Furthermore the buttons you are refering to are wrapped in a child div of the previous one, with class name "v-grid-editor-buttons"
However you can try to add css rules in your theme in the following way.
.v-grid-editor-buttons {
position: relative;
left: -300px; // Adjust this value experimentally so that it fits your need
}
Below is a screenshot the css applied to Vaadin's Sampler.
In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?
Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.
Div div = new Div();
div.add(chart);
// and then add div to Board
SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.
splitLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(ui -> ui.getPage().executeJs(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});
Note, if you have only one chart or have conveniently the references to chart instances you can do
chart.getElement().executeJs("$0.__reflow();", chart.getElement());
Please see http://jsfiddle.net/6XVNr/2/ for a (not very sexy) example of the issue I'm having.
I wish to resize an iframe element which has been given the jQueryUI dialog treatment. The issue I have is that I'm not sure which element I should resize.. I can resize the id of the iframe which was targeted for the .dialog() function, or I can resize the resulting ui-dialog class, which wraps around the iframe.
Resizing the iframe element only affects the height of the dialog, the width is simply hidden by the dialog. Resizing the ui-dialog class almost works perfectly.. the size is fine, but the buttonpane is not sticking to the bottom of the dialog. Which is the correct method and how can I get it fully working?
Please ignore the colours, the scrollbars, the fact it's not centred after resizing etc.. I stripped everything out for the example - also tested with a div instead of iframe and got the same results.
Thanks :)
Well it suddenly occurred to me - why not alter the height by resizing the iframe element, and the width by resizing the ui-dialog class.. seems to work ok so far :)
I'm using sIFR3 to render some text on a website. That site has print feature that will replace the page frame and leave only the text. An appropriate sIFR-alternate style for printing is set as well.
The problem I'm running into is that sIFR puts a CSS min-height as an inline style on the H2 that is replaced. And due to this setting, that seems to be calculated from the font-size given for that element, IE7 cuts off letters like gpq - letters that go below the baseline of the text.
I have tried and googled for a solution but couldn't find anything relating to this issue. Or how I could stop sIFR from setting the min-height value altogether.
You can test with any sIFR Text that falls back to Arial, for example, with a given height on the element it is located in (even non-pixel values).
Thanks and cheers
I had a look at a few projects i implemented with sIFR and i could not reproduce the error you described.
A few suggestions that maybe help:
You could try to work with padding
and margin instead of giving a
height value if that's possible.
Try to define line-height for the sIFR containing element. In both screen and print stylesheets.
Overwrite the min-height value inside the print stylesheet: selector{min-height:value !important;}
Are you sure that it is because of the min-height-style that the descender is cutted? Did you try to remove the style using e.g. Firebug?
In our application we have a text area with row size 20 .
Earlier when we were using the IE6 browser then the text area was displaying properly on screen but after switching over IE7 browser we have seen that after filling up 20 lines a active scroll bar start displaying with text area and only 19 lines are displaying in text area and 1 line is hiding in scroll bar and to check that 1 line we have to use the scroll bar. Please note that our text area's row size is 20 which means it should display 20 lines without active scrollbar which was happening in IE6 browser but not happening in IE7.
We are not sure whether anybody else have faced this kind of problem before.
Guys..as of now we have done some workaround by using bottom-padding to text area.....by doing this all the contents are dislaying properly in text area boxes but still the active scroll bar remains with the text area box.
let us know if you guys having any different solution.
Could you have a CSS rule somewhere setting the physical height of the textarea?
You might try applying the Overflow property to the CSS for the text area. Try overflow:auto; or overflow:hidden;. The last one will eliminate all scroll bars though. You could also try changing the border-width: thin;
I think you are using overflow:scroll, make it as overflow:auto.i checked it,it's working!
In spite of using row="20", try to use a fixed height for the textarea. And don't forget to put line-height. It will definitely solve this problem.