I have an image in a grid. I would like the image to resize to fit into the grid column, and to be horizontally and vertically centered.
My jqgrid looks like:
name: "frontimageurl", sortable: false, width: 100, height: 50, align: "center", fixed: true,
formatter: function (cellvalue, options, rowobject) {
return "<img src='" + cellvalue + "'>";
My image looks like overlapping of image.
Kindly help me to acheive this.Thanks in advance.
I added a class,
"<img src='" + cellvalue + "' class= Image>";
CSS:
.Image
{
width: 300px;
height: 100px;
margin: 5px 10px 0px 0px;
}
This works perfect for me.
Related
I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}
I'm using Electron React Boilerplate and i'm trying to make beautiful rounded corners but instead i'm getting white square corners. Do someone know any solution?
This is what my app corners looks like
This is my BrowserWindow code:
mainWindow = new BrowserWindow({
show: false,
width: 396,
height: 520,
transparent: true,
frame: false,
resizable: false,
webPreferences: {...preferences}
});
Edit: Here is more code
import React from 'react';
import styles from './Home.css';
import Titlebar from './FirstOpenScreen/Titlebar';
export default function Home(): JSX.Element {
return (
<div className={styles.home}>
<Titlebar />
<h1 className={styles.h1}>Hello, world.</h1>
</div>
);
}
And my CSS:
div.home {
width: 100%;
height: 100vh;
background-color: #252525;
color: white;
border-radius: 10px;
overflow: hidden;
}
Thanks everyone for the help. I was analyzing my own code and tried a CSS property that I saw on the internet, and it ended up helping me.
The solution is simply to add overflow: hidden to the CSS file to work.
body {
border-radius: 10px;
overflow: hidden;
}
I want to change background colors(say,red) of all cells in a column(say, Total Sale) where column value is more than x(say, 10)? How can this be achieved.
You can use formatter for total column.
{
name: "total",
index: "total",
formatter: function(cellvalue, options, rowObject){
if(cellvalue>10)
return '<span style="background-color: red; display: block; width: 100%; height: 100%; ">' + cellvalue + '</span>';
else
return cellvalue;
}
}
DEMO
I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML Snippet
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
CSS:
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
Any help would be greatly appreciated!!!
Try this and see if it works,this is just fancy box bit though,the rest of your code seems fine
$("#lightboxlink").live('click', function(){
$.fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : $(this).attr('href')
});
return false;
});
I want to create a thumbnail from an image uploaded from user on webpage. I want to create a image gallery where i can show all images preview as thumbnail and when user clicks he can see enlarged image.
Is it possible to do this so that page dont get heavy
You should probably cache the thumbnail images, but to create them see:
What is the "best" way to create a thumbnail using ASP.NET?
You must set a class for image tags for thumbnail. such this :
.thumbnail {
box-shadow: 0 0 7px #fff;
cursor: pointer;
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: -35px;
width: 70px;
border: 3px solid #ff``f;
border-radius: 3px;
}
and so for example :
<img id="Image1" class="thumbnail" src="..." .../>
and all images resize with css. and for create enlarged image you must use jquery Modal. for Modal read this link : http://www.jacklmoore.com/colorbox/
you must create a jquery file. after click on each image you must call plugin with your src. such this jquery:
$('.thumbnail').on('click', function () {
var src = $(this).attr('src');
$(this).colorbox({ html: "<img src='" + src + "' style='width:1024px;height:728px'/>", width: "1024px", height: "728px", close: "", closeButton: true, scrolling: false, overlayClose: true, scalePhotos: true, escKey: true });
});