I'm using ng-select in an Ionic3 / Angular5 project and I'm using its multiple selection configuration. The presentation of the select input is always considerably wider than it needs to be to contain the selected items or any of the available options.
I'd like it to be sized such that the width is at least the maximum width the component would have if any one of the available options were selected, and such that the otherwise the width is whatever is required to contain the actively selected options.
Is it possible to get ng-select to behave in that way?
I am not sure if ng-select has any build-in way to do what you want. But it is a block element which means you can control its width as you want. And in Angular, you can dynamically control style with ngStyle. For Example: define a getWidth() function with ngStyle.
<ng-select [items]="items"
[ngStyle]= "{width:getWidth()}"
>
</ng-select>
Now in getWidth function, you can return any value you want to control the width. you can loop through the items, and get maximum length of item, then translate into pixels. there's a ratio of string length to pixel which you might need to experiment.
And you can also listen to events and return the width based what is currently selected.
adding ng-select { .ng-dropdown-panel { width: auto !important; } } in CSS, it works but I would like to suggest adding a tooltip while hovering making a substring than adding css.
<ng-template ng-option-tmp let-item="item">
<div [ngbTooltip]="item.length > 15 ? item : ''" container="body">
{{item.length > 15 ? (item| slice:0:15) + '..' : item}}
</div>
</ng-template>
Related
is it possible to make the v-dialog have dynamic width? Currently the v-dialog by default has dynamic height which makes it shorten and lengthen depending on the length of content.
But can this be done with width?
I have a v-dialog that contains 4 tabs. 3 of those tabs don't require much width but the last tab contains a table so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
Vuetify v-dialog: https://vuetifyjs.com/en/components/dialogs
Setting width to "unset" seems to work, haven't discovered any negative side effects yet.
<v-dialog v-model="dialog" width="unset">
<YourDialogContent></YourDialogContent>
</v-dialog>
or CSS
.v-dialog {
width: unset;
}
For Desktop
so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
For desktop, we can set dynamic width for v-dialog based on contents inside the dialog easily, by manually setting the width="auto " (with extra space).
<template>
<v-dialog width="auto ">
...
</v-dialog>
</template>
For Mobile
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:
<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Final Version
We can combine both the logics into one like:
<template>
<v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Working Demo | Code Pen
On Desktop
If we open the dialog using the click me button, we can see the dialog has a small width as the content of tab 1 & 2 is very small. But if we click on tab 3, which has a large data table, you can see the dialog width and height automatically increases. You can toggle between tabs and can see this again.
On Mobile
If you open this demo on mobile, you can see the dialog is opening in full-screen by default and the width is constant.
Write custom css rules and not set width or max-width props. e.g.:
I use a custom class in order to not apply rules to all v-dialog:
<v-dialog v-model="dialog" content-class="v-dialog--custom">
<!-- dialog content -->
</v-dialog>
And create your custom rules:
.v-dialog--custom {
width: 100%;
}
/* Desktop */
#media screen and (min-width: 768px) {
.v-dialog--custom {
width: 50%;
}
}
You can see this on codepen: https://codepen.io/hans-felix/pen/BajByxx
Are you talking about this part?:
<v-dialog
v-model="dialog"
width="500"
>
If so, why just don't remove the width="500" part and leave without one? I tested and it stretches dynamically. This option is not required and nothing is breaking if you remove it.
In case I misunderstood something, please feel free to add more details.
I think, what are you searching is the fullscreen (bool) property or depending on the needs the max-width (Number) property.
By setting one of those you control the width of the v-dialog depending on the surrounding element. The surrounding element width can be adjusted via css, e.g. flexbox.
Use what scientists are using.
Make width as a computed variable, and then return your value based on the breakpoints.
If you want to set width dynamically based on the contents in the dialog then just modify the width function to return the width based on the contents.
Copied from vuetify site: LINK
<v-dialog v-model="dialog" :width="width">
<v-img src="~~~"></v-img>
</v-dialog>
<script>
...
computed:{
width() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
}
},
}
</script>
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
overflow:visible
increasing z-index
changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
You have to initialize the select manually
something like :
$(document).ready(function(){
$('select').formSelect();
});
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.
I'd like to replace though CSS the type of an input from input type="text" to input type="date". Does it possible?
Thanks
No.
CSS is a presentation language. It cannot be used to alter the semantics and structure of a document.
The closest you could come would be to determine which if a file and date input were visible in the document.
You may only change appearance of elements (not real type) by css3 appearance property. For example some text element into element button:
span
{
-moz-appearance:button;
-webkit-appearance:button;
appearance:button;
}
But list of possible values is limited. Still not chance to change input type="text into input type="date".
(Late for you, but could be useful for somebody else)
I had to do the same for the mobile version of my website. I created 2 forms, one for big resolution screens and other for mobile. After the resolution becomes less than 600px width I hide the 1 form and display the 2nd (the second one is with changed types).