ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• January 10, 2017 at 7:05 pm #309555
  alexanderchristiansen

  Member

  Post count: 179

  Hi Amazing Swift,
  Would love to have Tabs in my Modal views for my size-guides.
  I found a similar site doing it – for your reference.
  How can I make this happen with the Modal-functionality of Swift?

  Attachments:

  You must be logged in to view attached files.
  January 10, 2017 at 8:27 pm #309574
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  There is a way to do it. Create the tabs in an spb section and then include the shortcode of the section in the modal shortcode content.

  First create the tabs content inside an Spb Section and then let me know so I can help you.
  Will need admin credentials.

  -Rui

  January 10, 2017 at 8:53 pm #309579
  alexanderchristiansen

  Member

  Post count: 179

  This reply has been marked as private.
  January 10, 2017 at 8:53 pm #309580
  alexanderchristiansen

  Member

  Post count: 179

  This reply has been marked as private.
  January 10, 2017 at 10:34 pm #309587
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  This reply has been marked as private.
  January 10, 2017 at 10:50 pm #309591
  alexanderchristiansen

  Member

  Post count: 179

  Thanks Rui!
  I will try it right away.
  Quick follow up though – is it possible to make the modal view bigger? The images are very hard to read atm.

  January 11, 2017 at 11:47 am #309645
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  I think you should use the image asset instead using an image inside a text block. Right now there are spaces in the image itself I think, better crop it.

  -Rui

  January 12, 2017 at 4:08 am #309814
  alexanderchristiansen

  Member

  Post count: 179

  Hi Rui!
  Thanks!
  Though still a problem. It’s not really working on mobile.
  The Modal window pops out of the screen.
  I guess it could be possible to make the modal 100% size on mobile maybe? (fullscreen)

  January 12, 2017 at 8:30 am #309816
  alexanderchristiansen

  Member

  Post count: 179

  Here is a link! 🙂

  https://organicbasics.com/?spb-section=test_modal_001

  January 13, 2017 at 12:07 pm #310026
  David Martin – Support

  Moderator

  Post count: 20834

  I cannot login into the site:

  

  January 13, 2017 at 6:34 pm #310117
  alexanderchristiansen

  Member

  Post count: 179

  Sorry!
  Site is it online again! 🙂
  Looking forward to your reply.

  January 16, 2017 at 6:56 pm #310330
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  This should help you out Alex.

  @media only screen and (max-width: 767px) {
  
  	.modal-body, 
  	.modal.in .modal-content {
  	    width: 100%;
  	    max-width: 350px;
  	}
  	
  	.modal-dialog, .modal.fade .modal-dialog {
  	    -webkit-transform: translate(-65%,-65.4%)!important;
  	    -moz-transform: translate(-65%,-65.4%)!important;
  	    -ms-transform: translate(-65%,-65.4%)!important;
  	    transform: translate(-65%,-65.4%)!important;
  	}
  	
  	.spb_tabs .nav-tabs li a {
  	    padding: 10px 0px;
  	    text-align: left;
      }
  
  }
  
  @media only screen and (max-width: 479px) {
  	.nav-tabs>li {
  	    width: initial;
  	}
  	.spb_tabs .nav-tabs li {
  	    margin-right: 15px;
  	}
  }

  January 17, 2017 at 11:13 pm #310502
  alexanderchristiansen

  Member

  Post count: 179

  Hi David,
  Still seems to misalign.
  Please look at – and set it to mobile. It’s not centered.
  https://organicbasics.com/?spb-section=test_modal_001

  January 18, 2017 at 11:38 am #310553
  David Martin – Support

  Moderator

  Post count: 20834

  I have adjusted to this:

  @media only screen and (max-width: 767px) {
  
  	.modal-body, 
  	.modal.in .modal-content {
  	    width: 100%;
  	    max-width: 350px;
  	}
  	
  	.modal-dialog, .modal.fade .modal-dialog {
  	    -webkit-transform: translate(-71%,-65.4%)!important;
  	    -moz-transform: translate(-71%,-65.4%)!important;
  	    -ms-transform: translate(-71%,-65.4%)!important;
  	    transform: translate(-71%,-65.4%)!important;
  	}
  	
  	.spb_tabs .nav-tabs li a {
  	    padding: 10px 0px;
  	    text-align: left;
      }
  
  }
  
  @media only screen and (max-width: 479px) {
  	.nav-tabs>li {
  	    width: initial;
  	}
  	.spb_tabs .nav-tabs li {
  	    margin-right: 15px;
  	}
  }

  January 18, 2017 at 7:44 pm #310681
  alexanderchristiansen

  Member

  Post count: 179

  Hi David,
  Still seems to set the modal-view incorrectly.
  Maybe the easiest fix would be to set both height and width to be 100% – so it fills the whole screen?

  Please see here when you click size-guide:
  https://organicbasics.com/product/silvertech-black-t-shirt-2/

• Back to forum

  Posted in: Atelier