Trying to left align suggestions from the dropdown list in the DataSearch component from ReactiveSearch for autocomplete feature. They currently display in the middle of the dropdown.
Here is what it says to do
<ReactiveBase
app="query-index"
url="http://localhost:9200">
<DataSearch
componentId="SearchSensor"
dataField={["suggestions"]}
className="autocomplete"
iconPosition="right"
innerclassName={{
list: "text-item"
}}
/>
</ReactiveBase>
and then in my css
.autocomplete .text-item {
text-align: left !important;
}
However, its not working, still displaying in the middle, what am I doing wrong?
Related
I'm trying to figure out how to change the thick light blue border that appears while the mouse button is down when clicking on a pagination number. I have tried border-color on the a element but that doesn't do it.
ul.pagination a.page-link:active {
border-color: #f00;
}
Don't remove outlines (or their visual substitutes). They have an important purpose.
It's actually a box-shadow variable. But just restyle it. Don't remove it.
.page-link:focus {
box-shadow: var(--bs-pagination-focus-box-shadow);
}
You'll want to learn how to use your browser's document inspector to discover what CSS rule is styling an element. You can force states to find :active and :hover styles, for example.
Right now, the boolean fields in the edit forms in activeadmin are rendered so that clicking on the whole row where the checkbox is positioned can change the checkbox value. So not only on the checkbox and its label but also on all the space left and right to it.
But I want to make just the checkboxes clickable, not the entire line. How is it possible to implement this?
add this to active_admin.scss file
form fieldset > ol > li.boolean label {
width: auto;
margin-left: 20%;
padding-left: 0px;
}
this will work then with just the checkbox and the text and not all the line for both sides.
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);
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 created this simple code, It it just a button that stays on a "push" state when clicked and returns to normal when clicked again.
THE PROBLEM:
by using float:right the text in the label goes to right, and if i dont set the float it goes to the left by default. but when I put float:center it stays on the left. If someone can help me put the text on the center I would be happy. thank you!
This is my code from jsfiddle
The jQuery Mobile element you want to center is the one nested within your fieldset with the .ui-btn-text class:
#ui-2 .ui-btn-text {
text-align : center;
width : 100%;
}
http://jsfiddle.net/nfGmJ/10/