Jump to content
  • 0
DataCobalt

Move Submit Button In-Line With Text Fields?

Question

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.

 

 

Share this post


Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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! :)

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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. 

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...