p:imageSwitch in p:dialog not correct size

[vished]

Dears,

I´ve tried to use a p:imageSwitch in a p:dialog.
But currently I have a issue with the size. Because my picture is for example 1000x 600 px.
But the height and width is not repsonsive for mobile devices, iPad...
It´s always the full height and width. How can I solve this?

Here my code:

[img]<p:dialog id="showPictureDialog" widgetVar="showPictureDialog"
responsive="true" appendToBody="true" position="center"
showHeader="true" styleClass="custom-dialog" height="auto" width="auto"
header="Jetzt Bild herunterladen" maximizable="false"
minimizable="false" dynamic="false" modal="true" resizable="false"
closable="true" closeOnEscape="true">

<h:form id="showPictureDialogForm">

<p:commandLink oncomplete="PF('showPictureDialog').hide()" style="width: auto; max-width: auto; height: auto; text-align:center;"
ajax="true" immediate="true">
<p:imageSwitch id="fadeEffectDialog" effect="wipe"
widgetVar="imageSwitchDialog"
slideshowSpeed="#{gallerySlideshowController.slideShowSpeed * 1000}">

<ui:repeat id="fadeEffectImagesDialog"
value="#{gallerySlideshowController.selectedStorageAttachmentList}"
var="storageAttachment">

<p:graphicImage title="#{storageAttachment.id}"
style="width: auto; max-width: auto; height: auto; text-align:center;"
value="#{galleryPictureExtendedPictureRequestController.pictureExtended}">
<f:param name="id" value="#{storageAttachment.id}" />
</p:graphicImage>
</ui:repeat>

</p:imageSwitch>
</p:commandLink>


</h:form>
</p:dialog>[/img]

Code: Select all

	<ui:define name="head">
		<script type="text/javascript">
            function addCustomClass() {
                var modalDialogId = PF('showPictureDialog').cfg.id;
                $(PrimeFaces.escapeClientId(modalDialogId + "_modal")).addClass('custom-dialog');
            }
        </script>
	</ui:define>

Code: Select all

@media ( min-width : 960px) {
	.custom-dialog.ui-dialog {
		width: 70% !important;
	}
}

@media ( min-width : 0px) and (max-width: 960px) {
	.custom-dialog.ui-dialog {
		width: 100% !important;
	}

}

.custom-dialog.ui-widget-overlay {
		background: #000000 none repeat scroll 0 0 !important;
		opacity: 1.0 !important;
}

.custom-dialog.ui-dialog .ui-dialog-content {
	padding: 0px !important;
	font-size: 0;
}

[mert.sincan]

I think you can try with;

Code: Select all

<style type="text/css">
    @media ( min-width : 960px) {
        .custom-dialog.ui-dialog {
            width: 70% !important;
        }
    }

    @media ( min-width : 0px) and (max-width: 960px) {
        .custom-dialog.ui-dialog {
            width: 100% !important;
        }

    }

    .custom-dialog.ui-widget-overlay {
        background: #000000 none repeat scroll 0 0 !important;
        opacity: 1.0 !important;
    }

    .custom-dialog.ui-dialog .ui-dialog-content {
        padding: 0px !important;
        font-size: 0;
    }

    .imageSwitchClass,
    .imageSwitchClass > img {
        width: 100% !important;
    }
</style>

<script type="text/javascript">
    function addCustomClass() {
        var modalDialogId = PF('showPictureDialog').cfg.id;
        $(PrimeFaces.escapeClientId(modalDialogId + "_modal")).addClass('custom-dialog');
    }
</script>

Code: Select all

<h:form>

    <p:commandLink oncomplete="PF('showPictureDialog').show();" actionListener="#{testView.changeFlag}"
                   ajax="true" immediate="true" update="showPictureDialog">TEST</p:commandLink>

    <p:dialog id="showPictureDialog" widgetVar="showPictureDialog"
              responsive="true" appendToBody="true" position="center"
              showHeader="true" styleClass="custom-dialog" height="auto" width="auto"
              header="Jetzt Bild herunterladen" maximizable="false"
              minimizable="false" dynamic="false" modal="true" resizable="false"
              closable="true" closeOnEscape="true">

        <h:form id="showPictureDialogForm">
            <p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
                <p:commandLink oncomplete="PF('showPictureDialog').hide()"  actionListener="#{testView.changeFlag}" style="width: 100%; height: auto; text-align:center;"
                               ajax="true" immediate="true" update="showPictureDialog">
                    <p:imageSwitch id="fadeEffectDialog" effect="wipe" rendered="#{testView.flag}"
                                   widgetVar="imageSwitchDialog" styleClass="imageSwitchClass"
                                   >

                        <ui:repeat id="fadeEffectImagesDialog"
                                   value="#{imagesView.images}"
                                   var="storageAttachment">

                            <p:graphicImage name="/demo/images/nature/#{storageAttachment}">

                            </p:graphicImage>
                        </ui:repeat>

                    </p:imageSwitch>
                </p:commandLink>
            </p:panelGrid>


        </h:form>
    </p:dialog>

</h:form>

Code: Select all

public void changeFlag() {
    if(flag)
      flag = false;
   else
      flag = true;
}

Also, please see ; http://www.w3schools.com/css/css_rwd_images.asp
http://www.w3schools.com/css/tryit.asp? ... ive_image2

[vished]

Hm it´s not working correct: The height is everytime to large
Just keep it simple at first (afterwards if this works we can to this also in p:dialog)

Code: Select all

.imageSwitchClass, .imageSwitchClass>img {
	width: 100% !important;
}

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">

<f:view contentType="text/html" encoding="UTF-8">
	<h:head>
		<f:facet name="first">
			<meta http-equiv="X-UA-Compatible" content="IE=edge" />
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<meta name="viewport"
				content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
			<meta name="apple-mobile-web-app-capable" content="yes" />
		</f:facet>
		<ui:insert name="head" />

		<h:outputStylesheet name="css/core-layout.css" library="rio-layout" />
		<h:outputStylesheet library="bootstrap" name="css/bootstrap.css" />
		<h:outputStylesheet name="css/animate.css" library="rio-layout" />
		<h:outputStylesheet name="css/rio-font.css" library="rio-layout" />
		<h:outputStylesheet name="css/ripple-effect.css" library="rio-layout" />
		<h:outputStylesheet name="css/font-awesome.css" library="rio-layout" />
		<h:outputStylesheet name="css/theme.css" library="primefaces-rio" />
		<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />
		<h:outputStylesheet name="css/custom-theme.css" library="custom-style" />

	</h:head>

	<h:body>

		<h:form>

				<p:imageSwitch effect="wipe" styleClass="imageSwitchClass"
					slideshowSpeed="#{gallerySlideshowController.slideShowSpeed * 1000}">

					<ui:repeat
						value="#{gallerySlideshowController.selectedStorageAttachmentList}"
						var="storageAttachment">
						<p:graphicImage title="#{storageAttachment.id}"
							value="#{galleryPictureFullSizePictureRequestController.fullPath}">
							<f:param name="id" value="#{storageAttachment.id}" />
						</p:graphicImage>
					</ui:repeat>

				</p:imageSwitch>

		</h:form>


	</h:body>
</f:view>
</html>