I am struggling to remove the dropdown arrow next to the column names 'Name', 'Datum', 'Creator'...
The dropdown arrow gets rendered in an i-Tag, and if I edit the html via Chrome and add 'display: none' it gets removed...
however I am unable to access the i tag or the class v-icon via css in the code. Probably because it is not created before the rendering process.
Is there any other way to remove the dropdown arrow?
Thanks in advance!
Html of my table, called 'file-list':
The best way to hide the sort icon is via header-props. For example:
<v-data-table
:headers="headers"
:items="items"
:header-props="{ sortIcon: null }"
>
First, I'm pretty sure that you can access this <i> icon tag with css, because the fact that some element will get created dynamically does not preventing it to be affected by your css.
Sure your css could get overridden because of Vuetify css, according to the rules of specificity. I would suggest beginning with add a class property to the <v-data-table>, to allow you to specify the css for the tag something like that:
.my-datatable-class .datatable thead th.column.sortable i {
display: none;
}
It's different if you are using scoped style, this, and more about css specificity is covered here, thanks #Traxo
Anoter option is to implement the whole header section of the data-table by yourself, which is allowed by Vuetify using scoped-slots example of how to do it is in the examples, look for the Slot: items and headers and there at the template code you can see the <v-icon small>arrow_upward</v-icon> thing, just implement the headers omitting that, and there you go without css, adding something like that into your <v-data-table>:
<template slot="headers" slot-scope="props">
<tr>
<th
v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
#click="changeSort(header.value)"
>
{{ header.text }}
</th>
</tr>
</template>
use sortable option false to the necessary columns
ex-:
headers: [{ text: 'Name', value: 'name', sortable: false },
{ text: 'Date', value: 'date', sortable: false }]
It is not needed to write any custom CSS. Just possible to use provided vuetify property
sort-icon
It is enough to provide the value of sort-icon as false. It will hide sorting icon of all columns, as I see it is what you need.
<v-data-table
:headers="headers"
:items="items"
:sort-icon="false"
>
Related
Can someone explain to me how to get to these buttons in the DataGrid?
I want to change the color which atm. looks like this although they are not disabled.
How am I supposed to select the classes correctly to get to the buttons? I actually fixed this by just styling with the sx prop
sx={{
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
color: '#074682',
},
},
}}
But I would like to do this in my theme (components) for light mode here
I read the css documentation of DataGrid on Mui and I'm confused about how to get deeper into toolbarContainer.
Any help is appreciated. I really want to understand this and not just try out stuff.
I can see:
MuiDataGrid-root
MuiDataGrid-toolbarContainer
THEN
MuiButton-text
Would I then just select them in that order?
EDIT:
This also works:
But why can't I just select the MuiButton, then the text and then add the color like this:
I have a bootstrap html table. filtering is used in the field. how do I make sure that the table contents are hidden before filtering starts?
filter script and html table:
$(document).ready(function(){
$("#surname").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#table tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<table class="table" id="table">
<thead class="thead-light">
<tr>
<th></th>
<th class="text-center" scope="col">Guest</th>
<th class="text-center" scope="col">Org</th>
Bootstrap v4 uses d-none for setting anything to "display: none".
Set each on each <tr class="d-none"> and they will be hidden on default. In your code, just after you filtered everything, let's show them again using jquery (not tested):
/* ... */
$("#table tr").filter(function () {
const show = $(this).text().toLowerCase().indexOf(value) > -1;
if (show) {
$(this).removeClass('d-none');
}
});
This post is more of a comment on BS-4 than anything....
Your requirement is very simple - first hide all the tr's and then on the filter - show the ones that meet the requirement.
Soap box moment -
I am not in favour of the new BS-4 utility classes and use of "!important" on everything.... to the casual observer - it may well be nice to simply apply the class to the elemnet and get the outcome - but when you look at the code or the less files from BS - EVERY SINGLE UTILITY CLASS IS STYLED WITH "!IMPORTANT"....
this can be seen in the following picture which shows a span with 4 utility classes - and ALL four classes are styled with the use of !important..... that alone is enough to make me re-consider BS as a viable option for creating sites - imagine all the important tags that you will have.
I also do not love the new approach of using a utility for every single style choice... imagine a div with 4 different margins styles, four different paddings, and four different border styles..... a utility class for each.... eek
Just my opinion - but for something as simple as display: none... do it with css and leave off the !important.
Can we include font awesome icons in an object by using ngstyle and how do we bind them in HTML?
I tried the below code, but it is not working for me:
$scope.Items = [
obj: {data:65476756,right:12344,title:"Income"},object:{ "font-size" : "20px", "text-align":"center" ,"icon":"fa fa-level-up"}]
and my HTML looks like this:
<div my-widget data="item.obj" ng-style="item.object">
</div>
ng-style expects the object keys are CSS style names and values are corresponding values for those CSS keys. As there is no CSS style named icon it is getting ignored.
fa fa-level-up are the CSS classes and they should be used like classes only.
So you need to change your JS code like:
$scope.Items = [{
obj: {data:65476756,right:12344,title:"Income"},
object:{ "font-size" : "20px", "text-align":"center"},
classes:"fa fa-level-up"
}]
And then use it in HTML like:
<div my-widget data="item.obj" ng-style="item.object" ng-class="item.classes">
</div>
Note: item.classes is string.
Ref: https://docs.angularjs.org/api/ng/directive/ngClass
Edit
To answer your question about size, color, position: you can use standard CSS styles for this. For more info check this link: https://fontawesome.com/v4.7.0/examples/
If you change the font-size of the icon's container, the icon gets
bigger. Same things goes for color, drop shadow, and anything else
that gets inherited using CSS.
Alternatively you can also use classes like fa-2x...fa-5x.
I have an angularjs app using several dynamic ngTables. As a result of a search operation executed on the page, I need to "highlight" one of the rows in one of the tables, but I'd like to remove the highlight after the user takes some action (any CTA execution, I would suppose).
I've managed to figure out how to add the "bold" class (although I really need to change the background color) to my "tr", "td", or a "span" around the content of a "td", using the data ngTable is iterating over. I've verified this in Firebug. However, I see no change on the screen. I'm guessing that the CSS settings used in ngTable are overriding what I'm setting.
What do I have to do to make ngTable change the background color of the table row?
Once I figure this out, I'll probably remove the class setting on a "$timeout" or on some CTA action.
ng-class
can be used to specify class. And It is possible to write expressions for ng-class.
For eg:
<table ng-repeat="questions in comment.employee">
<tbody>
<tr ng-class="{{e.ID == 1 ? 'class1' : 'class2'}} " >
<td>
{{e.Name}}
</td>
</tr>
</tbody>
</table>
When using the FormHelper->create(...), the HTML that gets rendered looks like this:
<form action="/blogs/add" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<!-- omitted: form inputs -->
</form>
Why is that div with the display:none; style there? How do I make it not show up?
UPDATE: Just to be clear, I'm wondering why both the div AND the hidden input inside the div show up. They don't seem to be necessary, and therefore I don't want them to be there.
For anyone coming to this recently, there is a simple solution to this now that doesn't involve a custom helper. Using the FormHelper templates, the block of code in question is generated by the 'hiddenBlock' template. (See the full list of default templates here: https://api.cakephp.org/3.2/class-Cake.View.Helper.FormHelper.html#%24_defaultConfig).
So, to amend the example given in CakePHP's documentation to match this case and remove the wrapping <div> around the hidden <input> for _method (assuming HTML5):
// In your View class
$this->loadHelper( 'Form' , [ 'templates' => 'app_form' ] );
// in config/app_form.php
return [
'hiddenBlock' => '{{ content }}'
];
I was confronted with this problem because I recently implemented a Content Security Policy that doesn't allow inline styling, and I thought I should share my working solution.
The div is there to be valid HTML.
Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5. Source
Edit: To answer your question, you can't easily get rid of it. It's hard-coded into FormHelper::create(), you'd have to override that method in a custom helper. Why is it bothering you anyways?
This link might help you.
Whenever you use FormHelper->create() method ,A hidden input field is generated to override the default HTTP method. You can also change it by passing type option. Kindly ask if it not worked for you.
Try:
echo $this->Form->create('User', array(
'inputDefaults' => array(
'div' => false
)
));
The divs won't be created on any input of the form.
use hiddenField => false property