Move Submit Button In-Line With Text Fields?

DataCobalt · December 31, 2014

Good morning,

I am making a submission form that will be arranged in one long line. I would really prefer to have the submit button be on the same line as the text fields as there is a large report below it and the more space I have to work with the better.

I attempted to add the CSS element Float: right to the button in the layout section of the applied style to no avail.

Any and all help is much appreciated.

Jan · January 13, 2015

Hello DataCobalt,

It seems, the simplest way is to copy the class to head of your webpage.

The code of the webpage will be like:

<HTML>
<head>
<style>
.cbSubmitButton
{
/*Submit Button Attributes*/
The code of the class from the Style
}
</style>
</head>
<body>
The code of an embedded DataPage
</body>
</html>

Does it work for you?

Jan · December 31, 2014

Hello DataCobalt,

If I understand correctly, you can create an HTML block, click the Source button and enter the following code:

<input id="Submit" name="Submit" class="cbSubmitButton" onmouseover="cbButtonHover(this,'cbSubmitButton_hover');" onmouseout="cbButtonHover(this,'cbSubmitButton');" value="Submit" type="submit">

Then the "Submit" button will be displayed in this block.

To hide the second button, you can add to ".cbSubmitButtonContainer" class the following line:

display:none;

I hope, it helps.

Happy New Year!

DataCobalt · December 31, 2014

This works perfectly! Thank you!

DataCobalt · January 12, 2015

Hello DataCobalt,

If I understand correctly, you can create an HTML block, click the Source button and enter the following code:
<input id="Submit" name="Submit" class="cbSubmitButton" onmouseover="cbButtonHover(this,'cbSubmitButton_hover');" onmouseout="cbButtonHover(this,'cbSubmitButton');" value="Submit" type="submit"> 
Then the "Submit" button will be displayed in this block.

To hide the second button, you can add to ".cbSubmitButtonContainer" class the following line:
display:none;
I hope, it helps.

Happy New Year!

Hi there, I just noticed that once the page is actually deployed the button will no longer have my style applied to it. Is this due to the Display: none; quality? In the datapage preview it displays perfectly but looks like the default HTML button when deployed.

Any ideas?

DataCobalt · March 2, 2015

Hey Jan, I just had a change to try this out and it worked great. I had to nab the code for the hovered version as well, but overall it looks perfect.

Thank you!

Jan · March 5, 2015

You are very welcome!

Farnsbarnes · July 9, 2016

After very many weeks of banging my head against the Caspio and Java / HTML coding brick walls (bearing in mind I started as a complete newbie) I'm quite excited that at last I might be able to give something back to the Forum... however small my contribution may be!

Jan's code (see Jan's first entry above) that puts a submit button in an HTML block works beautifully in Chrome... but it fails in Internet Explorer 11. After trawling through the web I read that IE11 apparently has a bug regarding 'submit' on a form !!

The way I got round this (lucky find on my part) was to ensure that the 'id' had a different name to the 'name'. So instead of Jan's

<input id = "Submit" name "Submit"...

I changed

<input id= "mysubmit" name = "differentname"...

After that, IE was happy.

Hope this helps someone somewhere.

Farnsbarnes · July 9, 2016

Oh dear. Looks like my solution above was not foolproof after all. My newly created submit button in IE is playing up again (runs perfectly in Chrome).

The latest weird problem I've found is that from load-up of IE, the submit button doesn't work the first 4 or 5 times... and then it starts to work properly.

I just can't seem to get any reliability with the browser on this issue.

Any ideas anyone?

Login

Move Submit Button In-Line With Text Fields?

Question

DataCobalt

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Jan

Link to comment

Share on other sites

Jan

Link to comment

Share on other sites

DataCobalt

Link to comment

Share on other sites

DataCobalt

Link to comment

Share on other sites

DataCobalt

Link to comment

Share on other sites

Jan

Link to comment

Share on other sites

Farnsbarnes

Link to comment

Share on other sites

Farnsbarnes

Link to comment

Share on other sites

Join the conversation

Browse