I try to use "Typeahead.js" in a project with high keyboard interactivity.
I use the lib to purpose some input suggestions to users. Sometimes there is a lot of results and the suggestion list is scrollable (with this CSS):
.tt-suggestions {
height: 124px !important;
overflow-y: auto !important;
}
But when I use keyboard, the list doesn't scroll although this evolution has been merged.
Is it a bug or i do something wrong ?
I don't find any example on Web.
Thanks.
Apply the styles to .tt-dropdown-menu (!important won't be necessary):
.tt-dropdown-menu {
height: 124px;
overflow-y: auto;
}
Related
Can we shift arrow icon to right in sap.m.Panel in SAPUI5, I tried to search it through its documentation but unable to find it. Please suggest if it is possible to do SO by some customization of control.
Not the preferred way upto my knowledge and I don't know any other way to do it.
.sapMPanelWrappingDiv .sapUiIconPointer{
right : 0;
}
Use right : 0!important; if not working with above code.
First things first: I don't think this is a good decision UX-wise...
Anyways you have several choices to achieve this from trivial to complex:
Use CSS to position icon to the right as mentioned by santhosh
Hide the expand icon via CSS (display: none;) and use the headerToolbar aggregation. In there you can do what you want and place a button to the right with a press-listerner expanding/collapsing the panel
Override sap.m.PanelRenderer.renderHeader and adjust the icon placement right in the renderer
Here is my CSS solution (which I would go for):
.sapMPanel.myPanelIconRight .sapMPanelExpandableIcon {
right: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.sapMPanel.myPanelIconRight .sapMPanelWrappingDiv .sapMPanelHdr,
.sapMPanel.myPanelIconRight .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
padding-right: 0;
margin-right: 3rem;
}
Please note the class I myPanelIconRight attached to the sap.m.Panel control to separate our custom styling from the UI5 CSS.
BR
Chris
VSCode version 1.16
When i have unsaved changes in a file, the dot in the tab file's name is not really visible as seen below.
I'd like to highlight it somehow (e.g. to change its color). I inspected the dot element via Dev tools in VSCode and it has a ciass of action-label icon close-editor-action but i am not sure how could I implement the CSS into editors' customization..
I know about workbench.colorCustomizations settings but i have not found any documentation about this particular little thing.
The only customizable setting of tabCloseButton is changing its position but not its visual.
Does anybody know how could this be implemented?
Extension Custom CSS and JS Loader.
For instance: changing the entire unsaved tab:
.tab.dirty {
background-origin: border-box;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 8px,
#465298 9px
);
}
Or changing close icon:
.tab.dirty .close-editor-action {
background: #465298 !important; /* here could be some inline image*/
border-radius: 50%;
}
I'm using gwtbootstrap3 for my app and I want to change font of all my app, I want to do something like this:
body{
font-family:tahoma;
}
I tried to customise widget, but I have to do this fo all my widgets and I don't think it's very optimal.
So how can I do that?
This might be one of those infrequent cases where you want to use !important, i.e.:
body{
font-family:tahoma !important;
}
Before you do, however, read When Using !important is the Right Choice.
I have almost all other elements of Thunderbird hidden to create a minimal interface. I keep my mail sorted by date only so I do not need the sort bar.
Does the sort bar have a class name (like .sortBar) that I can easily hide with CSS?
This userChrome.css works as of Thunderbird 31.1.1:
vbox#threadContentArea > tree#threadTree > treecols:first-child {
height:0 !important;
margin: 0 !important;
padding: 0 !important;
visibility: hidden !important;
}
Notes:
Just using display:none doesn't work in this case; comments welcome if someone knowledgeable with XUL / moz CSS knows why. The rules above work around that, but leave an empty space of 8px height. Again, improvements welcome :)
To create such rules, use the DOM Inspector addon (install it from Thunderbird's "Extensions" screen), then inspect the XUL tree of Thunderbird (File > Inspect Chrome Document), and try to build a CSS selector of what you want to modify.
How can I visually customize autocomplete fields in Wicket (change colors, fonts, etc.)?
You can use CSS to modify the look of this component. For the Ajax auto-complete component in 1.3 the element you want to override is div.wicket-aa, so for example you might do:
div.wicket-aa {
background-color:white;
border:1px solid #CCCCCC;
color:black;
}
div.wicket-aa ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:5px;
}
div.wicket-aa ul li.selected {
background-color:#CCCCCC;
}
Perilandmishap has probably the most usefull answer for your needs. Personally, I always found the default Ajax auto complete control in Wicket to be woefully insufficient for my needs. If you really want a professional "feel" to your auto complete, roll your an using Wicket's Ajax libraries.