These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.
Related
I wrote program using GTK3 with css styling and it works perfect on my KDE.
But problem is that on ubuntu and windows 10 styling only works partially.
I have css file like this:
window {
background-color: white;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
background-color: #555555;
}
Everything works except changing background of buttons.
It's how I load css:
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_path (provider, "styles.css", NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
How can I make it work?
I found solution:
window {
background-color: white;
}
button {
border: none;
padding: 0px;
text-decoration: none;
font-size: 16px;
}
button > label{
padding: 15px 32px;
background-color: #555555;
color: white;
}
You can change by writing css on ~/.config/gtk-3.0/gtk.css.
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: #theme_selected_bg_color;
}
References:
https://github.com/nana-4/materia-theme/issues/370#issuecomment-481256130
https://asukiaaa.blogspot.com/2022/07/change-color-of-close-button-of-ubuntu2204.html
I'm new using styled-components and I been trying to create an input using google material design standards but I haven't been able to recreate the animation that makes the label move when the input is focused.
const Input = styled.input`
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
&:focus {
outline: none;
}
`;
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus & {
top:-20px;
font-size:14px;
color:#5264AE;
}
`;
So in resume, I want the label to move 20px up, change its font-size and color when the label is focused, I'm not really sure if my approach is the correct or it will be better just to implement a normal CSS class in this case.
You are missing the ~ sign to target the label element on input focus
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus ~ & {
top:-18px;
font-size:14px;
color:#5264AE;
}
`;
Working demo
I am using select2. I've enabled users to select keywords that doesn't match. Just wondering when someone does type something that doesn't match, how do you style the dropdown item that's not matching to show a different style? I would like to gray it out or make it italic or something.
Heres an example, the 1st dropdown item doesn't match anything else in the dropdown:
I'm using Angular, but I'm happy for anyone with jQuery solutions to answer as well. I can appropriate it for Angular.
you will want to use the formatResult option, along with styling the result using the markMatch internal function of select2 to retain underline function (see https://groups.google.com/forum/#!topic/select2/FhVygJ_21Nk )
This is an example of code i did to style user input than did not match the queried list of tags. I also included the count of the number of times the tag was used
...
formatResult: function(result, container, query, escapeMarkup) {
var markup=[];
window.Select2.util.markMatch(result.text, query.term, markup, escapeMarkup);
if (result.isNew) {
return markup.join("");
} else {
return '<span class="post-tag">'+markup.join("")+'</span><span class="item-multiplier">× '+result.count+'</span>';
}
},
...
css for my above example
<style>
.item-multiplier {
font-size: 90%;
font-weight: normal;
margin-right: 4px;
color: #999;
}
.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
position: relative;
text-decoration: none;
font-size: 100%;
line-height: 1.4;
white-space: nowrap;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-results .select2-highlighted {
background: #fff0d9;
color: #000;
}
.select2-result-selectable .select2-match, .select2-result-unselectable .select2-match {
font-weight: bold;
}
</style>
Is there a simple modular tree built with Twitter Bootstrap and Backbone.js that provides common tree control functionality?
Here's a Bootstrap tree widget (from "Trees in Twitter Bootstrap"):
Building on Vitaliy's CSS and Mehmet's jQuery, I changed the a tags to span tags and incorporated some Glyphicons and badging into my take on a Bootstrap tree widget.
Example:
For extra credit, I've created a GitHub project to host the jQuery and LESS code that goes into adding this tree component to Bootstrap. Please see the project documentation at http://jhfrench.github.io/bootstrap-tree/docs/example.html.
Alternately, here is the LESS source to generate that CSS (the JS can be picked up from the jsFiddle):
#import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
#import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */
/* collapsable tree */
.tree {
.border-radius(#baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
background-color: lighten(#grayLighter, 5%);
border: 1px solid #grayLight;
margin-bottom: 10px;
max-height: 300px;
min-height: 20px;
overflow-y: auto;
padding: 19px;
a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
li {
list-style-type: none;
margin: 0px 0;
padding: 4px 0px 0px 2px;
position: relative;
&::before, &::after {
content: '';
left: -20px;
position: absolute;
right: auto;
}
&::before {
border-left: 1px solid #grayLight;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
}
&::after {
border-top: 1px solid #grayLight;
height: 20px;
top: 13px;
width: 23px;
}
span {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #grayLight;
border-radius: 5px;
display: inline-block;
line-height: 14px;
padding: 2px 4px;
text-decoration: none;
}
&.parent_li > span {
cursor: pointer;
/*Time for some hover effects*/
&:hover, &:hover+ul li span {
background: #grayLighter;
border: 1px solid #gray;
color: #000;
}
}
/*Remove connectors after last child*/
&:last-child::before {
height: 30px;
}
}
/*Remove connectors before root*/
> ul > li::before, > ul > li::after {
border: 0;
}
}
I recently published my backbone.js tree widget.Check it out at https://bitbucket.org/dnation/bbtree/ and see if it meets your needs.
I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.
Is there any way these texts can be wrapped and limited to the column width?
Here is an image of the issue:
Give this a shot in your CSS:
.x-grid3-hd-inner {
overflow: hidden;
padding: 3px 3px 3px 5px;
white-space: normal;
}
And additionally, another option if the first doesn't work:
.x-column-header-inner .x-column-header-text {
white-space: normal;
}
.x-column-header-inner {
line-height: normal;
padding-top: 3px !important;
padding-bottom: 3px !important;
text-align: center;
top: 20%;
}