How to increase layout size for touch UI | Community
Skip to main content
d_s11
d_s11
Level 2
November 9, 2015
Solved

How to increase layout size for touch UI

  • November 9, 2015
  • 4 replies
  • 4174 views

I have multiple tabs for my touch UI dialog and it looks pretty out of wack. How do I increase the size of the layout, if possible?

 

<?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"    jcr:title="Touch UI Properties"    sling:resourceType="cq/gui/components/authoring/dialog">    <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">
    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 kautuk_sahni

    Hi 

    I have found this article covering "How to make the component dialog floating and set default size", I hope this too would come to you as some help:

    Link:- http://blogs.adobe.com/contentmanagement/tag/cq-component-dialog-sizing/

     Create a node in your component of type cq:EditConfig and name cq:editConfig, this should be a sibling of the dialog node.

    2. To the cq:editConfig node add a property with name “cq:dialogMode”, type “String” and value “floating”

    3. To your dialog node add two properties of type Long, name height and width and value to what the you want the size of the dialog to be.

    4. That should be it. This should open the dialog with the size that you mention in the height and width properties you created in the earlier step and give the users the ability to resize the window by dragging.

    I hope this would help you.

     

    Thanks and Regards

    Kautuk Sahni

    4 replies

    Lokesh_Shivalingaiah
    Lokesh_Shivalingaiah
    Level 10
    November 9, 2015

    You should add width to the below class. Add that in your component css

    .cq-dialog-floating{

    }

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    November 10, 2015

    Hi 

    I have found this article covering "How to make the component dialog floating and set default size", I hope this too would come to you as some help:

    Link:- http://blogs.adobe.com/contentmanagement/tag/cq-component-dialog-sizing/

     Create a node in your component of type cq:EditConfig and name cq:editConfig, this should be a sibling of the dialog node.

    2. To the cq:editConfig node add a property with name “cq:dialogMode”, type “String” and value “floating”

    3. To your dialog node add two properties of type Long, name height and width and value to what the you want the size of the dialog to be.

    4. That should be it. This should open the dialog with the size that you mention in the height and width properties you created in the earlier step and give the users the ability to resize the window by dragging.

    I hope this would help you.

     

    Thanks and Regards

    Kautuk Sahni

    Kautuk Sahni
      josep71215583
      josep71215583
      March 20, 2018

      This does let you set the size of the dialog but it does not make it resizable. Anyone has any idea on how to do it?

      prabodh
      prabodh
      Level 2
      July 23, 2019

      The blog that you mentioned is for resizing classic UI dialog.

      I'm just wondering if there is any way to achieve resizing of a dialog and the fieldset in Touch UI by adding some properties to the dialog nodes?

      Terms & ConditionsAccessibility statement

      Loading footer...