i have a textArea where i show some errors happened during a file loading.
Now i will want customize my text area in this way:
I want to show a few character in bold, I saw that Label consent this,but can I also do this with a textarea?
I solved using a RichTextArea whitout top and bottom toolbar
.no-toolbar-top .gwt-RichTextToolbar-top{
display: none;
}
.no-toolbar-bottom .gwt-RichTextToolbar-bottom{
display: none;
}
Then i added these styles at components:
RichTextArea myArea = new RichTextArea();
myArea.addStyleName("no-toolbar-top");
myArea.addStyleName("no-toolbar-bottom");
myArea.setValue("<p><small> Error <b> Row 1 Col 2 </b> error description </small></p>");
To do this you have to use the RichTextArea component or create your own widget.
Btw: you can hide buttons from the toolbar: https://vaadin.com/forum/#!/thread/171171
I agree to the earlier answers saying that RichTextArea is the right choice.
However, as an alternative to using CSS for hiding its toolbars, the following will make them disappear as well (Vaadin 7.7.6):
RichTextArea myArea = new RichTextArea();
myArea.setReadOnly(true);
Related
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
I have this piece of code
private VaadinLabel email,
this.email = new VaadinLabel();
this.informativoDab = new VaadinLabel();
HorizontalLayout row = new HorizontalLayout();
row.setWidth("100%");
row.addComponent(this.email);
row.addComponent(this.informativoDab);
And it gives me this:
When I actually want this:
It should be simple to do, but I've tried doing
this.email.setWidth("50%");
and it didn't work.
How can I do this with Vaadin Label, since I also need a hint to show the entire e-mail?
You should actually use "100%" as the label size as it should take all the space the layout gives for it, half in this case.
By default Vaadin will then wrapt the text on multiple lines. IIRC there isn't a built in css style name to do it, so you'll need to use CSS to disable wrapping and use the ellipsis to visualise overflown text. You could e.g. use "cut_text" style name (email.addStyleName("cut_text")) for your email label along with following css rules to your theme:
.cut_text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
as #mstahv mentioned, add a style name to your label
email.addStyleName("cut_text");
and use that css he wrote
.cut_text {
white-space: nowrap;
text-overflow: ellipsis;
}
as for the whole email to be displayed, I would suggest adding a description. Then when user hovers the hidden email it will popup in a small tooltip.
email.setDescription("very_long#email.com");
I am creating label and one button in vaadinn
And when i put these componants on Css Layout the content are comming like
label
button
but i want this is in
-label -buttom
does any one know the solution what css should be applied for that?
best Regards
Arvind
There is two solutions for your problem. You can add StyleName to your CssLayout like this :
myCssLayout.setStyleName("my-layout");
and then add this to your css file:
.my-layout .v-label{
float:left;
}
Or, and this is the right way to resolve your problem, you can use HorizontalLayout instead of CssLayout. It will allow you to put your components in one line.
HorizontalLayout layout = new HorizontalLayout();
layout.addComponent(mybutton);
layout.addcomponent(mylabel);
for the components like you have label and button
label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
then you also have to make this css changes for that component
u-component-label{
display:inline-block;
}
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
I have buttons in my web app using jQuery Mobile.
When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed.
What must I do for that focus halo not to be displayed at all ?
You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
I have found that the best way to do this is to give focus back to the page after your buttons are clicked.
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
Well thats easy, just open your xxx-mobile-theme.css file and find the class ui-focus
and remove the box-shadow property manually
None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.
.myform button:focus {
outline: 0;
}