uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '620px',
height : '100%',
});
}
if height 100 % UI looks like this(under upload button not necessary empty spaces)
if I put fix height in px(it makes UI scrollable)
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '620px',
height : '250px',
});
}
I want actual this type if I SELECT File it automatic increase its height(when i choose image that time i want to increase automatic height of matdialogbox)
Try this, it will take complete height of the page for your matdialog
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '100%',
minHeight: 'calc(100vh - 90px)',
height : 'auto'
});
}
The dialog does automatically adapt to the content as long as its html is wrappend inside mat-dialog-content. :
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>...>
<div mat-dialog-actions>...>
The default max height of content of material dialog is 65vh. It can be increased by styling .mat-dialog-content
::ng-deep {
.mat-dialog-content {
max-height: 90vh;
}
}
Add a class to your dialog:
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
panelClass: 'myClass',
});
}
Then add the following style to the class in your CSS:
.myClass {
max-height: 95%;
width: 620px;
overflow-y: auto;
}
Related
I have an overflow menu. It is very long, but has the following style:
height: 15rem;
overflow-y: auto;
Nevertheless when I click on the menu the browser window height becomes bigger as if the menu is opened in is full size (see the difference between browser scrollbar in the first and second pictures. Besides I have empty space below my page reserved for the full-size menu.
So the invisible part of the menu nevertheless takes space. How could I fix that?
Code:
<DataTable>
<TableContainer>
<TableToolbar>
<TableToolbarContent>
<TableToolbarSearch/>
<TableToolbarMenu>
<div style={ {display: displayMenu ? "block" : "none", height: "7.5rem", width: "230px", overflowY: "auto"}}>
{filterItems.map(e => { return (
<TableToolbarAction // onClick={ ()=> setItemClicked({...e, defaultChecked: false})} onChange = {() => { setDisplayMenu(true); if(headers.map(el => el.key).includes(e.key)) { setHeaders(headers.filter(el => el.key !== e.key)); } else { setHeaders([ ...headers, { key: e.key, header:
e.header } ]) } }} hasDivider = {true} >
<Checkbox defaultChecked={ true} id={ e.key} labelText={ e.header}/>
</TableToolbarAction>
) })}
</div>
</TableToolbarMenu>
</TableToolbarContent>
</TableToolbar>
</DataTable>
Use overflow: scroll; to give a scrollbar or use overflow: hidden; to hide the overflow.
I'm trying to fill a div (black area in following screen) with an img.
But the scale of image should not change.
And when the size of the div changes according to the size of the browser, the image should be displayed by adjusting the width or adjusting the height accordingly.
The image changes dynamically, so I never know if it will be tall or long.
for example
Finally, the target is to make the image show as large as possible without changing the scale of the image.
Below is the code I developed.
<div className="asset__item">
<a className="asset__img">
<img
alt="item image"
src="/img/1.jpg"
/>
</a>
</div>
CSS
.asset__item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
padding: 20px 20px 20px 20px;
width: 100%;
border-radius: 16px;
margin-top: 20px;
background: #202020;
}
.asset__item img {
width: auto;
max-width: 100%;
}
Please let me know how to fix it.
I try not to modify the styles of asset__item as much as possible.
But it's ok to add a div there instead.
You can try using object-fit :
`
img{
width: auto;
max-width: 100%;
object-fit:cover;
}
`
I could not find a way to do it using only CSS. So I directly assigned width and height to my image using JavaScript. We should handle 4 different situations:
Album picture and album screen
Album picture and portrait screen
Portrait picture and album screen
Portrait picture and portrait screen
My imgObj contains initial width and height of the image (I got them using react-image-size).
And here is the code:
const imageObj = useSelector((state) => state.imageHandling.imageObj);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleImageSize = () => {
if (imageObj) {
let w = 0;
let h = 0;
const ratio = imageObj.width / imageObj.height;
const theSameTypes = () => {
w = window.innerWidth;
h = window.innerWidth / ratio;
if (h > window.innerHeight) {
h = window.innerHeight;
w = h * ratio;
}
};
if (imageObj.width > imageObj.height) {
if (window.innerWidth > window.innerHeight) {
theSameTypes(); //album picture and album screen
} else {
w = window.innerWidth; //album picture and portrait screen
h = w / ratio;
}
} else {
if (window.innerWidth > window.innerHeight) {
h = window.innerHeight; // portrait picture and album screen
w = h * ratio;
} else {
theSameTypes(); // portrait picture and portrait screen
}
}
setWidth(w);
setHeight(h);
}
};
useEffect(() => {
window.addEventListener("resize", handleImageSize);
return () => {
window.removeEventListener("resize", handleImageSize);
};
}, []);
useEffect(handleImageSize, [imageObj]);
In header i have search field, which should have with same lice container.
Some how i need to make biger input, example:
[![enter image description here][1]][1]
My code jsFiddle
$(".search-input").on("mousedown", function () {
$(this).addClass('active');
$('.search_container').addClass('test')
});
$(".cancel-icon").on("mousedown", function () {
$('#search-content').hide();
$('.search-input').removeClass('active');
$('.search-input').val('');
$('.search_container').removeClass('test')
});
For some reason input don't wanna go biger -_-
create one more class of your name. I just call it as .some and it to div.search-field when input is active and remove it when cancel-icon is clicked.
.some{
flex-shrink: 0;
width: 100%;
transition: width 1s;
}
.search-field{
...
width: 50%;
...
}
$(".search-input").on("mousedown", function () {
...
$('.search-field').addClass('some');
});
$(".cancel-icon").on("mousedown", function () {
...
$('.search-field').removeClass('some');
});
display: flex making the .search-field shrink. In order to avoid that I added flex-shrink: 0
Updated
Added transition: width 1s to animate a width of .search-field and added an extra style width: 50% to an existing .search-field which doesn't change the existing size but it will make impact in transition.
Am trying to create navbar with logo but unable to increase the size of image.
This is written in kotlin/js but concept should be same for native html/js code.
Html index file:
fun HTML.index() {
head {
title("Welcome to Seller Service")
link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.css") { }
link(rel = "stylesheet", href = "static/styles/index.css") {}
}
body {
div {
id = "index"
}
script(src = "/static/output.js") {}
script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
}
}
React kotlin/js code to replace div with index id:
override fun RBuilder.render() {
div(classes = "section") {
div(classes = "container") {
nav(classes = "navbar") {
div(classes = "navbar-brand"){
a(classes = "navbar-item"){
img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
}
}
}
}
}
}
}
}
css seen from console in browser:
.navbar-item img {
max-height:1.75rem
}
.img-style {
<strike>max-height:4rem;</strike>
}
max-height:4rem;
my max-height is not applied, any idea why?
It is overall governed by order of properties. I solved this problem by overriding the same rule in my css and linking it to the page.
.navbar-item > img { max-height: 4rem; }
I override this rule of navbar-item class direct children img.
I am using angularjs and zurb foundation. I have ng-repeat creating a row for each item in items. Each row itself has two rows within. I am using position relative to move the second inner row up behind the first inner row. The first row has z-index 1 to move it on top. The goal is to create a menu that is hidden behind a div initially.
Seems to work except for one flaw. The problem I am having is that it seems that the directive has its height set to the initial height of its content. So the directive is 12em tall while the content is only in the top half.
Forcing the directive to be 6em tall works for the first item but the subsequent ones have the content of the back row all jibbly wibbly! (I believe that is the scientific term)
Any help would be appreciated. Smashing my head against the keyboard is usually my 'go to' in these situations, but it hasn't helped in this case.
Sample
//index.html
<div ng-repeat='item in items'>
<div directive></div>//ends up 12em
</div>
//directive.html
<div class="row front">//6em tall
//content
</div>
<div class="row back">//moved 6em up
//Menu with buttons
</div>
//style.css
front: {
height: 6em;
z-index: 1;
}
back: {
height: 6em;
position: relative;
top: -6em;
}
The problem is that you are trying to position two divs with relative positioning. They don't need to be relative since they are intended to occupy the same space.
Make the parent div use relative positioning:
.parent { position: relative; }
.front { position: absolute; top: 0; height: 6em; }
.back { position: absolute: top:0; height: 6em }
https://docs.angularjs.org/api/ng/directive/ngRepeat
This is how I would do it:
app.directive('row front', function() {
return {
restrict: '6pm',
scope: {
collection: '=',
columnCount: '='
},
transclude: true,
template: '<div><div class="column" ng-repeat="col in cols">' +
'<div ng-repeat="item in col" ng-transclude></div>' +
'</div></div>',
link: function( scope ) {
var partition = function partition( size, items ) {
if ( items.length === 0 ) { return []; }
return ([items.slice( 0, size )]).concat( partition( size, items.slice( size )));
};
var relativenize = function() {
if ( !scope.columnCount ) { return; }
scope.cols = partition( scope.columnCount, scope.collection );
};
scope.$watch('columnCount', columnize );
scope.$watch('collection', columnize );
}
};
});