I'm trying to align text vertically in a label.
This doesn't work :
.setStyleAttribute("verticalAlign","bottom")
Does anyone know how to do that?
You should be using vertical-align instead of verticalAlign as setStyleAttribute() uses CSS to display.
However, it doesn't seem to work despite that. Labels have a setHorizontalAlignment() method but no setVerticalAlignment() method.
The above two facts makes me think that vertical alignment is not allowed in widgets such as a Label or it might be a bug. It is probably worth opening an issue in the issue tracker
I assume you are confusing the Label with the Panel, if so then what you are trying to do is to align the label in the panel. Do so like this:
panel.setHeight(100)
.setVerticalAlignment(UiApp.VerticalAlignment.BOTTOM).add(label);
To clarify (in a flow-layout) the size of the label is automatically the same size as the text, so it would not usually make sense to align the text inside of the label unless you had already re-sized the label. The flow-layout is what is used in VerticalPanel and HorizontalPanel.
The CSS "label.setStyleAttribute('vertical-align','bottom');" that I've tried did NOT work, so I'm guessing we would need to dig into the GWT for a more literal solution to this question. I would be interested to see one. For more info checkout the objects in the GAS API or GWT Panels, or let me know if I missed something relevant.
Related
I was looking around GMail and just found that the Message Composition uses:
textarea for recipients
input for subject
div for the message
I want to focus on the div for the message part. So I did some research and found out to be able to make a div behave like a textarea simply do this.
But my question is. Why do it? Why not just use an ordinary textarea? Does it provide any additional security?
Because they cover it with JavaScript to make it a ~WYSIWYG control instead of a plain text one.
Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.
I'm aware that for input and textarea tags you can specify autocapitalize as off. Is there a way to do this when you are using a content editable div, as they do not have the autocapitalize attribute?
I have seen similar thinks achieved elsewhere, on the likes of online code editors. The orion editor for example uses an editable div and doesn't suffer this problem.
I have found a workaround to this. I fill the content editable with a zero width space () that the user can't see. Then when they tap and start typing, no auto upper casing!
Add this to the divs style :)
text-transform:lowercase;
I hope this helps!
EDIT
Okay now I understand fully. In an editable div this is not possible to achieve. The variable for this function cannot be controlled by HTML or JS. This is hardcoded into the objective-c of IOS. Nothing can change this unfortuatnly. The only way you could possible achieve what you are trying to do and that is to change the div to an input field, and then use the auto-capitalisation: off.
Apologies its not good news but I hope this helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hello I'm a student that is building a site for a friends business and I have learned online how to make radio buttons styled with custom images but i am trying to make a small, medium , large option to make the user able to choose the size. I know java but not much Jquery. I understand if it is not possible and I am open to other ways of accomplishing the task as long as i can make code that can check which option is selected to make it direct them to the right page/shopping-cart product.
---HERE'S AN EXAMPLE OF WHAT I HAVE SO FAR: http://squidsquadgang.com/radiobuttons.html
any help would be much appreciated!
Thank you,
Stephen T.
You have quite a bit of JavaScript doing the work on the radio buttons. The javaScript you are using is actually creating dynamic <span> elements and completely hiding the radiobuttons. While this may support old browsers better, a much more "future-proof" (one might even say "correct") way to do this is through pure CSS. It's simpler, gives you more options and customization, and it will load much faster than that giant JavaScript file.
So, while this may not be exactly what you came here looking for, I encourage you to at least give this a try.
Example: Here's what I've done.
Give it a try: go into your image editor and remove the text. Now, the text displayed on your buttons is in your HTML code. much easier to edit than images, and faster too.
The code explained: Making custom CSS radio buttons
input[type=radio] {
display:none;
}
This selects all the radio buttons on the page and gives them a display:none property. It hides the radio buttons, since you don't want to see those ugly things anymore.
input[type=radio] + label { ... }
This selects all of the radio button labels. In our HTML, we've created labels for each of the <input> elements. It's a built in feature in HTML: when labels are clicked, the radio button is automatically selected. We don't need any javascript here! Don't reinvent the wheel.
Here, we define both the background image and the style of the text to be displayed over the background image (if any). In this case, it's "XS", "S", and "M". I've used display:table-cell to display the buttons side-by-side (like in your link) and make use of the vertical-align property. If there is no text, simply change it do display:inline-block and adjust from there.
input[type=radio]:checked + label { ... }
Finally, we specify the styling for the selected option. In your case, I've moved the background image down 42px (background-position:0 -42px;). Again, you are going to want to remove the text from your image. You can look up other styling you can do - you could make the text "glow" by adding something like:
text-shadow:2px 2px 10px #FF00FF;
You can play around with the details. Even though it's not going to display the images IE8 and before, this will still nicely fall back to whatever text you have in <label>. It will just go to regular old radio buttons. People smart enough to use Chrome or keep IE updated, well, they'll get the extra eye-candy.
I guess you are asking something like this:
http://jsfiddle.net/vybEf/1/
$('.styled').click(function(){
var idS=$(this).attr('id');
var s=idS.substring(5,7);
$('#txt').css({'font-size':''+s+'px'});
$('#txt').html(''+s+'px');
});
Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000