Please help. I have been using Vue Tables 2 for > 2 years now, and I have never had this problem. My table shows up perfectly as usual, but now whenever I click on a cell, it is surrounded by a blue outline on chrome and a dotted outline on firefox. It is exhibiting the same behavior as if I had clicked on an input. I went through my Vue Tables 2 options one by one, disabling each in turn and it did not change the behavior. I looked through bootstrap 4 tables documentation, and could not find the same behavior as a option, so i believe it is vue tables that is doing it. The demo fiddle on the Vue Tables 2 page also has this behavior. It is very distracting and I am trying to get it to stop.
My goal is to have the table show the behavior it has before, which is to do nothing when you click on a cell.
I am using Bootstrap 4.4, and Vue-Tables-2 version 1.6.25
My options array looks like so
tableOptions: {
skin: 'table table-sm table-hover border-0',
filterable: true,
pagination: { chunk:4 },
perPageValues: [],
perPage: 18,
dateColumns: ['created_at'],
dateFormat: 'MM-DD-YYYY',
toMomentFormat: 'YYYY-MM-DD H:mm:ss',
texts:{
filter:"",
count:"",
filterPlaceholder:"Search",
page:"Page:",
noResults:"No matching records",
loading:'Loading...',
},
columnsClasses: {
cntCnt: 'text-center noOutline',
qtCnt: 'text-center noOutline',
statusName: 'text-center noOutline',
created_at: 'text-center ',
},
headings: {
id: 'Ref',
name: 'Name',
cntCnt: 'Contacts',
qtCnt: 'Quotes',
statusName: 'Status',
created_at: 'Created',
orgSelect: '',
},
}
I have added a picture that shows whats going on.The outline is arouns any and every cell I click, including the column headers.
That is the focus selector of CSS whose style is being applied. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
You need to override this CSS and set border to none.
You can also do this:
:focus { outline: none; }
Related
This works:
let players = [
{ id: 1, name: 'Player 1', color: 'amber' },
{ id: 2, name: 'Player 2', color: 'sky' },
];
...
<span class="underline decoration-{player.color}-500">{player.name}</span>
Only sometimes. I can see the prop is applied to the class properly in the resulting HTML when inspecting the page source in the browser:
but the color is not applied to the underline most of the time. When I change the source HTML to a static color, save the file, and then change it back, one or both of the underlines stops working. Similarly, when I change a color in the javascript, usually the other color starts working, but not all of the time. Is this due to a race condition? Am I using Svelte wrong which might explain this seemingly random behaviour?
From this:
Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project.
What you should do:
<script>
let players = [
{ id: 1, name: 'Player 1', className: 'decoration-amber-500' },
{ id: 2, name: 'Player 2', className: 'decoration-sky-500' },
];
</script>
<span class="underline {player.className}">{player.name}</span>
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
i have a vue app with ant-design-vue table in it as a content. but the sorter icon is not showing up while i have import the icon correctly and working correctly when just display the icon. when i'm inspect the element, the icon is actually there but not displayed like in the picture above.
i have also tried by overwrite the css:
.ant-table-column-sorter-up .off .anticon .anticon-caret-up {
font-size: 300px; //to see if there any change clearly
color: pink
}
but there is nothing change on the template.
this is where i'm setting up the sorter on the ant design table:
{
title: 'NAME',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
sortDirections: ['ascend', 'descend'],
scopedSlots: {
customRender: 'name',
},
width: 250,
},
it's shows there is no <svg> data in <i> like another ant-design icon. the <i> is empty. that means it's not affected by css. it's may affected by the ant-design-table.
and the function is working perfectly, just the icon is not showing up. is there anyway that i can do so that the sorter icon can showing up?
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.