In Line Block

replied on December 7, 2016

Hi Chynna, would it be possible to see some of the CSS used for this? And is this / are these custom HTML blocks on the form? Lastly, as a test, if you go in the Form Layout editor and click on the gear icon in the top right of the designer, what happens if you increase the maximum width?

1 0

replied on December 8, 2016 • Show version history

Hey James. Yes these are custom HTML buttons. I have increased the maximum width to 1030, still no change. Please see the CSS Below.

#q46, #q47, #q48, #q49 {display: inline-block; width:25% vertical-align:top;}
#q50, #q51, #q52, #q53 {display: inline-block; width:25% vertical-align:top;}
#q54, #q55, #q56, #q57 {display: inline-block; width:25% vertical-align:top;}
#q58, #q59, #q60, #q61 {display: inline-block; width:25% vertical-align:top;}
#q62, #q63, #q64, #q65 {display: inline-block; width:25% vertical-align:top;}

.tiles1 {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 210px;
  height: 170px;
  cursor: pointer;
  margin: 8px;
  padding: 5px 0px;
  border: 2px solid #02689a;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal normal bold 22px/normal "Trebuchet MS", Helvetica, sans-serif;
  color: #084D74;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre-wrap;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  background: #FFFFFF;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.tiles2 {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 210px;
  height: 170px;
  cursor: pointer;
  margin: 8px;
  padding: 5px 0px;
  border: 2px solid #309B47;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal normal bold 22px/normal "Trebuchet MS", Helvetica, sans-serif;
  color: #5A9734;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre-wrap;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  background: #FFFFFF;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

0 0

replied on December 12, 2016

James...any idea what might be happening?

0 0

Question

Question

Replies

Sign in to reply to this post.