I can't show caret icon for sorting beside the column name using react-bootstrap-table2 even i set the attribut sort to true in columns.
Thank you
Hopefully this link will solve your problem https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/215
If, by default, the caret is missing, you may add the following styles to your global stylesheet.
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
Related
I am fairly new to CSS and I can't seem to figure out why my editors are responding the way they are to float: left. I am trying to get the below editors next to each other horizontally:
With the following CSS:
.form-container {
margin: 0 auto;
max-width: 95%;
background: white;
border-radius: 10px;
display: flex;
height: 50hv;
flex-direction: column;
border: 1px solid #ddd;
}
.left-editor, .right-editor {
margin: 10px;
}
Once I add float: left to .left-editor, .right-editor the editor disappears and looks like this:
Any idea as to why?
I have created table with sorter in angular js. But I am unable to display up/down arrows to my code.What did I do wrong?
var app=angular.module("myModule",[])
.controller("myController",function($scope){
var employees=[
{name:"suha",dob:new Date("november,20,1995"),gender:"female",salary:"57300.00"},
{name:"Yashu",dob:new Date("august,25,1997"),gender:"female",salary:"47653.0000"},
{name:"sneha",dob:new Date("july,30,1999"),gender:"female",salary:"43300.00"}
];
$scope.employees=employees;
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column){
$scope.reverseSort=($scope.sortColumn==column)? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.getSortClass=function(column){
if($scope.sortColumn==column){
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
}
return '';
}
});
table,tr,td{
border:1px solid;
padding:10px;
}
.arrow-up,.arrow-down{
width:0;
height:0;
border-right: 5px transparent;
border-left: 5px transparent;
border-bottom-color: 10px solid black;
display: inline-block;
}
Complete code: https://jsfiddle.net/4vy9m3h1/
Add ng-class to th like below
<th ng-click="sortData('name')" ng-class="getSortClass('name')">
Name
</th>
See the working fiddle
Updated fiddle with arrow icons:
The problem actually lies on your CSS. This should work:
table,tr,td{
border:1px solid;
padding:10px;
}
.arrow-up{
width:10px;
height:10px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
.arrow-down{
width:0;
height: 0;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
You've entered a wrong property/value, i.e. using shorthand within this property border-bottom-color.
To test links in my Quilljs editor, I'm highlighting text and then clicking the link symbol in the toolbar -- for a split second the link tooltip shows up, only to disappear right away unless I hold my click on the symbol.
It appears that there's a 'ql-hidden' class that's being applied wrongly, but I'm not sure if it's something to do with my configuration being incorrect.
Here's the JavaScript:
var primaryQuill = new Quill('#editor', {
modules: {
toolbar: '#toolbar',
'link-tooltip': true
},
theme: 'snow'
});
Here's the HTML (using the Jade templating language):
#toolbar
span.ql-format-group
button.ql-bold(type="button") Bold
button.ql-italic(type="button") Italic
span.ql-format-group
button.ql-link(type="button") Link
#editor
p Start writing here...
And here are the only styles I've written for this:
.ql-toolbar {
background: #fff !important;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.1) !important;
margin: 5px 0px !important;
border: none !important;
}
.ql-container {
margin: -5px 0px !important;
background: #fff !important;
border: none !important;
box-shadow: 1px 2px 3px 1px rgba(0,0,0,.2) !important;
min-height: 500px;
font-size: 1.2em !important;
font-family: inherit !important;
color:rgba(0,0,0,.8) !important;
}
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.
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>