I saw in another support post how to create a text input field.
Is there a way to change the design of the input field (size, outline, background color, etc.)?
Thanks!
I saw in another support post how to create a text input field.
Is there a way to change the design of the input field (size, outline, background color, etc.)?
Thanks!
Hi Shawn,
Yes, you can use CSS, e.g.
<input style="width: 100%; height: 100%; border: 2px solid blue; background-color: red;" type="text" />
FYI, we’ve planned to support text input field in version 3.
Regards
Trying to get an expanding input box so trying to use this version: http://jsfiddle.net/7j5yswpb/6/
I don’t mind using your version or this one. Am trying to achieve the following. I have put the basic steps in place but don’t know how to integrate the input text.
Untitled1.saolapack (3.0 KB)
Would appreciate a saolapak that illustrates how to do this.
Thanks!
Any thoughts on this? Is it not feasible?
Might help in building Text-input for Saola which I believe is on the new features list …?
Thanks!
Hi Shawn,
Saola Animate allows adding custom JavaScript and CSS, so virtually, you can do anything which CSS and JS supports.
Please see the attached sample which uses contenteditable
attribute and CSS static
position to create an expanding input field as you described.
expanding_input.saolapack (2.7 KB)
Regards
This was very helpful!!! Thank you.
2 questions:
If possible, can you edit the file reflecting these questions?
expanding_input1.saolapack (9.9 KB)
Thanks so much!
Hi Shawn,
Unfortunately, nothing works in your project.
Let me describe my sample in details so you can recreate:
input
div editable when the scene is activated: function onSceneActivated(doc, e) {
doc.getElement('input').textDom.contentEditable = true;
}
input clicked
timeline to change the background color, dim the separator line, and show Submit button.input clicked
timeline when the input
shape receives mouse down
event for the first time: function onInputMouseDown(doc, e) {
if (this.userClicked)
return;
this.userClicked = true;
doc.getTimeline('input clicked').start();
}
function onSubmitClicked(doc, e) {
var inputDom = doc.getElement('input').textDom;
// get text input
var textInput = inputDom.innerText;
// show thank you
inputDom.contentEditable = false;
inputDom.innerHTML = 'Thank you!';
inputDom.style.textAlign = 'center';
// hide elements
doc.getElement('line').show(false);
this.show(false);
}
.group {
border-radius: 10px;
padding: 10px 20px;
box-sizing: border-box;
height: auto !important;
}
.group div {
position: static !important;
width: auto !important;
height: auto !important;
}
.input {
min-height: 1.2em;
}
.group div.line {
height: 2px !important;
margin-bottom: 10px;
}
.submit p {
margin: 0;
}
Regards