Solved

component dialog fields are large

Forum|Forum|5 years ago
October 13, 2020
4 replies
3519 views

Hi All,

We have carousel component and for this dialog text fields and multifield are added but when we open the dialog seeing fields are large and not fit into the box.

Could you please help us on this why the fields are large and we want to fit into the box and without going into Toggle full screen.

here is the dialog xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog"
width="850"
helpPath="/content/dia/authoring-help.carousel.html?wcmmode=disabled">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<carousel
jcr:primaryType="nt:unstructured"
jcr:title="Carousel Component"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="carousel-multifield-width">
<items jcr:primaryType="nt:unstructured">
<fieldset
jcr:primaryType="nt:unstructured"
jcr:title="Carousel Input"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<sectionTitle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Define the Heading for the Section"
fieldLabel="Section Title"
name="./secTitle"/>
<buttonTitle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Define the Button title for this section"
fieldLabel="Asset Button Title"
name="./buttonTitle"/>
<variationDropdown
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Select the variation from dropdown"
fieldLabel="Select Variation"
name="./variationDropdown">
<items jcr:primaryType="nt:unstructured">
<bigImage
jcr:primaryType="nt:unstructured"
text="Big centralized image"
value="bigImage"/>
<sameImage
jcr:primaryType="nt:unstructured"
text="Same image height"
value="sameImage"/>
</items>
</variationDropdown>
<autoplay
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
defaultChecked="{Boolean}false"
fieldDescription="Check if you want to autoplay the images"
fieldLabel="Autoplay"
name="./autoplay"
text="Autoplay"
value="true"/>
<autoplayTime
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldDescription="Set the slideshow time"
fieldLabel="Autoplay Time"
name="./autoplayTime"
value="{Long}1000"/>
<overlayOption
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Please configure in which size a video will be played"
fieldLabel="Video Play Options"
name="./overlayOption">
<items jcr:primaryType="nt:unstructured">
<default
jcr:primaryType="nt:unstructured"
text="Play the video at the same size / position"
value="default"/>
<fullscreen
jcr:primaryType="nt:unstructured"
text="Play video after click on play in fullscreen"
value="fullscreen"/>
<overlayM
jcr:primaryType="nt:unstructured"
text="Play video as overlay in medium size"
value="overlayM"/>
<overlayL
jcr:primaryType="nt:unstructured"
text="Play video as overlay in large size"
value="overlayL"/>
</items>
</overlayOption>
<fitoption
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
name="./fitCrop"
text="Adjust image to fit component"
value="true"/>
<multi
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/multifield"
fieldDescription="Click 'Add Fields' to add Asset for Carousel (Max. 8 and Min. 3 Assets Required)"
fieldLabel="Carousel"
max="{Long}8"
min="{Long}3">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset"
owp-acs-commons-nested="JSON_STORE"
name="./carouselData">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
method="absolute"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<assetType
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Tip : Select the Asset Type"
fieldLabel="Asset Type"
name="./assetType">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
text="Image"
value="image"/>
<video
jcr:primaryType="nt:unstructured"
text="Video"
value="video"/>
</items>
</assetType>
<assetHeading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Enter the Heading for the given asset"
fieldLabel="Asset Heading"
name="./assetHeading"
required="{Boolean}true"/>
<assetPath
jcr:primaryType="nt:unstructured"
sling:resourceType="roc/dia/overlays/pathbrowser"
fieldDescription="Select the path for Asset (Expected size: 1176X600)"
fieldLabel="Asset Path"
name="./assetPath"
required="{Boolean}true"
rootPath="/content/dam"/>
<assetAltText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Enter the Alternate text for the Asset(Image only)"
fieldLabel="Asset Alt. Text"
name="./assetAltText"
required="{Boolean}true"/>
<posterImage
jcr:primaryType="nt:unstructured"
sling:resourceType="roc/dia/overlays/pathbrowser"
fieldDescription="Poster Image for Video"
fieldLabel="Poster Image"
name="./posterImage"
rootPath="/content/dam"/>
<linkBehaviour
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Select the link behaviour"
fieldLabel="Link behaviour"
name="./linkBehaviour">
<items jcr:primaryType="nt:unstructured">
<sameWindow
jcr:primaryType="nt:unstructured"
text="Same window"
value="_self"/>
<newWindow
jcr:primaryType="nt:unstructured"
text="New window"
value="_blank"/>
</items>
</linkBehaviour>
<path
jcr:primaryType="nt:unstructured"
contextPath="{Boolean}true"
sling:resourceType="roc/dia/overlays/pathbrowser"
fieldDescription="Define Asset Link path"
fieldLabel="Asset Link Page Path"
name="./linkPath"
rootPath="/content"/>
<assetSummary
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/include"
fieldLabel="Asset Summary"
name="./assetSummary"
path="/apps/roc/dia/components/richTextEditor/cq:dialog/content/items/rte/items/column/items/bodyText"/>
</items>
</column>
</items>
</field>
</multi>
</items>
</column>
</items>
</fieldset>
</items>
</column>
</items>
</carousel>
</items>
</content>
</jcr:root>

Thanks,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by santhosh_kumark

Hi @gayatrik8153299 ,

Can you try creating the dialog as per the coral superTypes used in this articles to achieve the required layout.

• granite/ui/components/coral/foundation/container - defines a container for the dialog
• granite/ui/components/coral/foundation/fixedcolumns - defines fixed columns
• granite/ui/components/coral/foundation/form/textfield - defines a text field that lets authors enter data
• granite/ui/components/coral/foundation/form/textarea - defines a text area field that lets author more data than a text field

Regards,

Santosh

Manjunath_K

Hi @gayatrik8153299

Can you please share dialog xml if possible?

gayatrik8153299Author

I have shared the dialog xml file.

S

Sandeep6

Hi @gayatrik8153299 ,

Please follow dialog structure as "/apps/core/wcm/components/list/v2/list/cq:dialog" .

Then dialog will come as you require.

Thanks,

Sandeep

Umesh_Thakur

Community Advisor

Can you please check if there is any error in browser console?

make sure you are using either granite or coral UI to create the dialog fields not both in the same dialog.

santhosh_kumarkAccepted solution

Hi @gayatrik8153299 ,

Can you try creating the dialog as per the coral superTypes used in this articles to achieve the required layout.

• granite/ui/components/coral/foundation/container - defines a container for the dialog
• granite/ui/components/coral/foundation/fixedcolumns - defines fixed columns
• granite/ui/components/coral/foundation/form/textfield - defines a text field that lets authors enter data
• granite/ui/components/coral/foundation/form/textarea - defines a text area field that lets author more data than a text field

Regards,

Santosh

gayatrik8153299Author

We are using AEM 6.4.5 instance.. will this works?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded