You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Adding an selectable drop down in custom html

posted on October 6, 2020

I have previously been able to add editable text fields into html using html placeholders, css and javascript.  Is it possible to do this with a drop down field?  The goal is to add a drop down that is editable into a paragraph of text.

0 0
replied on October 7, 2020

You might be interested in this Answers post, which uses JS to tackle this.

Here's an alternate solution, though it probably works only for one dropdown per paragraph. Sample:

This is done by CSS only. In this example, the dropdown is "q3", but typically you should target them with something more meaningful, like a class name or by variable name. 

#q3 label {display: none;}
#q3 {padding: 0px!important;}
#q3 .cf-field {width: 100%;}
#q3 .cf-medium {width: 130px;}

#q3 .cf-field::before {
     content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend gravida nibh eget gravida. Maecenas in lacinia leo. Pellentesque eleifend faucibus urna. Nam molestie sollicitudin ante nec fermentum. Fusce malesuada, leo ac hendrerit fringilla, libero elit ultrices magna, id elementum turpis lorem eu lorem. Ut congue metus vel molestie egestas. Etiam condimentum ";
     font-family: "Open Sans", Arial, sans-serif;
}
#q3 .cf-field::after {
    content: " risus, eget cursus lacus faucibus dapibus. Aliquam odio orci, porta in maximus ac, rhoncus blandit turpis. Ut finibus quam nec aliquet aliquam. Sed dapibus fringilla mauris id laoreet. Suspendisse potenti. Vestibulum aliquet sodales ultrices. Nam eget hendrerit velit, eget eleifend libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;";
    font-family: "Open Sans", Arial, sans-serif;
}

 

0 0
replied on October 8, 2020

Thank for the suggestion, I was hoping to find a way to use an html place holder for easy maintenance if the surrounding text changes.  In the past, I've used something like this but it doesn't work for a drop down.

$(document).ready(function(){
  
  //MOVE THE DISTANCE FIELD
  //Find the controls
  var divRep = $('#txtRepPlaceHolder');
  var txtRep = $('.Rep DIV.cf-field INPUT, .Rep DIV.cf-field SPAN');//Search for INPUT or SPAN, SPAN is used for display
  //Remove the textbox from its current location
  txtRep.remove();
  //Insert it after the place holder
  txtRep.insertAfter(divRep);
  //Remove the place holder
  divRep.remove();
  //Hide the old distance label
  $('.Rep').hide(); 
});
 

Then I have a text field with the ccs style of "Rep".  I assume it doesn't work because I'm using a txt place holder but I'm not sure how to change it.

0 0
replied on October 8, 2020

Hello again,

I couldn't get your code sample to work for me - at a guess, I would modify yours to include ".Rep DIV.cf-field SELECT" to target the dropdown, so add that to the line where you are currently targeting INPUT and SPAN. 

This is my adapted version of your code, where instead of moving the dropdown field to the html text, I move the HTML text to the dropdown instead. I have a div with the id "txtRepPlaceHolderAfter" for text that goes after the dropdown, too, in case you have text after that. Also, there might be better ways to do this, I'm just adapting what you already have:

$(document).ready(function(){
  var divRep = $('#txtRepPlaceHolder'); //target your div which has text to place before the dropdown
  var txtRep = $('.Rep DIV.cf-field INPUT, .Rep DIV.cf-field SPAN, .Rep DIV.cf-field SELECT'); //find your field, input for single line fields, select for dropdowns
  var txtAfter =  $('#txtRepPlaceHolderAfter'); //target yoru div which has text to place after the dropdown
divRep.insertBefore(txtRep); //put text before your field
txtAfter.insertAfter(txtRep); //put text after your field
});
0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.