[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

how to make the lable two lines on the button?

Hi Experts,

I just wonder if it is possible to make the long "value" of the button split into two lines on the button instead of using a long button?


thanks.
0
panpioneer
Asked:
panpioneer
1 Solution
 
dorwardCommented:
No (well - perhaps in a small number of browsers, but you shouldn't be able to).

If the text is that long I suggest you ask yourself:

1 - Can the same meaning be communicated with less text?
2 - Does all of the text need to be on the button?
0
 
panpioneerAuthor Commented:
Unfortunately, it is not my decision, our users ask for it.
0
 
jaysolomonCommented:
Ever thought about creating an image?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jaysolomonCommented:
but if you insist the only way is javascript

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function init(){
document.forms[0].btn.value = "blahblahblahblah\nblahblahblahblah";
}
// -->
</script>
</head>
<body onload="init();">
<form name="form1" method="post" action="">
<input type="button" name="btn" value="">
</form>
</body>
</html>
0
 
paStiSSetCommented:
you can use an image wich will work as a button, you only need to draw button with the two lines (use paint or something else). once you have the image you can use a javascript.

try this:

<html>
<body>
<style>
<!--
.mouseBeOffMe {
border-top:    10px  solid #FFFFFF;
border-bottom: 10px  solid #FFFFFF;
border-left:   6px   solid #FFFFFF;
border-right:  10px  solid #FFFFFF;
}
.mouseBeOnMe {
border-top:    6px   solid #FFFFFF;
border-bottom: 14px  solid #FFFFFF;
border-left:   10px  solid #FFFFFF;
border-right:  6px   solid #FFFFFF;
}
.mouseBeDown {
border-top:    13px  solid #FFFFFF;
border-bottom: 7px   solid #FFFFFF;
border-left:   10px  solid #FFFFFF;
border-right:  6px   solid #FFFFFF;
}
.mouseBeUp {
border-top:    10px  solid #FFFFFF;
border-bottom: 10px  solid #FFFFFF;
border-left:   10px  solid #FFFFFF;
border-right:  6px   solid #FFFFFF;
}
//-->
</style>

</HEAD>
<BODY>

<center>
<img src="button.gif" border="0" class="mouseBeOffMe" onmouseover="this.className='mouseBeOnMe'" onmousedown="this.className='mouseBeDown'" onmouseup="this.className='mouseBeUp'" onmouseout="this.className='mouseBeOffMe'">
</center>
<-eof->

this will work as a button, you only need to <form>'it :)
0
 
panpioneerAuthor Commented:
thanks. I tried Jay's idea which looks pretty simple. Strangely, it works on a simple htm page, but when I move the codes to my JSP page, it does not work. Any clue why?
0
 
jaysolomonCommented:
i no nothing about jsp pages, but i assume you may have a syntax erro some where or something
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now