I would like to divide a bootstrap-vue table by a vertical line like this:
From the documentation it seems that it is possible only to have either borders between all columns, or no vertical borders at all, using either the bordered or borderless props of <b-table>.
Is this an inherent limitation of bootstrap-vue?
You would need to create a custom class to apply to the column cells.
regular CSS:
.b-table .my-left-border {
border-left: 3px solid #000;
}
or if using scoped styles
.b-table /deep/ .my-left-border {
border-left: 3px solid #000;
}
Then do the following in your fields definition:
export default {
// ...
data() {
return {
fields: [
'age',
'first_name',
{
key: 'last_name',
class: 'my-left-border'
}
],
// ...
}
},
// ...
}
<b-table :fields="fields" ... ></b-table>
Another option is to use css selectors:
.b-table /deep/ > thead > tr :nth-child(3),
.b-table /deep/ > tbody > tr :nth-child(3),
.b-table /deep/ > tfoot > tr :nth-child(3) {
border-left: 3px solid #000;
}
Related
.App {
text-align: center;
** --amenalBlue: #15426C;
--amenalOrange: #D9A460;**
}
h2,h3{
color: gray;
}
/* common table head style */
.tableHead {
*** background-color: var(--amenalOrange);***
}
.tableHead th {
color: var(--amenalBlue);
font-weight: bold;
}
Table head is not taking custom color which i have added but normal hex code is taking. This is happning in MUI table used inside MUI dialog
As you can see in this codesandbox, I have used the 'transform' property, based on this answer, also tried changing the font-size on the StepIconProps (commented out code on CSB).
The first option results in the circle resizing while still retaining its centre, and hence its alignment with the line, but the text stays in the same place.
The second option means the circle loses its alignment with the line, but the text stays nicely positioned relative to the circle.
I'm not sure either are entirely the correct way to do it. There is an example in the docs where the icon has been customised, but this involves an implementation a whole new icon, which I'd rather avoid. I am happy with all of the default appearance, with the only exception being the size.
I created a div element using styled components and I passed it as a prop icon at StepLabel from material UI.
import React, { useState, useEffect } from "react";
import { Stepper, Step, StepLabel } from "#material-ui/core";
const stepsOptions = {
0: [0],
1: [0, 1],
2: [0, 1, 2],
};
const StepIcon = styled.div`
background-color: ${({ backgroundColor }) =>
backgroundColor ? "#008a98" : "#DCDCDC"};
color: #fff;
width: 50px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
border-radius: 50%;
margin-top: -13px;
font-weight: 500;
z-index: 1;
`;
const Component = () => {
const [stepsArray, setStepsArray] = useState([]);
useEffect(() => {
setStepsArray(stepsOptions[activeStep]);
}, [activeStep]);
return (
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel
icon={
<StepIcon backgroundColor={stepsArray.includes(index)}>
<p>{index + 1}</p>
</StepIcon>
}
>
<Paragraph>{label}</Paragraph>
</StepLabel>
</Step>
))}
</Stepper>
)}
In ag-Grid when I change the row background color, it is working fine, but when I select the row, the color doesn't change to the blue color so I can recognize that the row is selected.
I'm using gridOptions.getRowStyle to change the row background color:
gridOptions.getRowStyle = function(params) {
return { background: "#3a3a3a" }
}
The way I would approach it, would be to use the rowClass option in ag-grid.
rowClass: 'my-row'
And then in your css you can define:
.ag-root .my-row:not(.ag-row-selected) {
background-color: #3a3a3a;
}
https://embed.plnkr.co/fTENsl/
Another option, if you want a custom selected color, would be to use this:
.ag-root .my-row {
background-color: #3a3a3a;
}
.ag-root .my-row.ag-row-selected {
background-color: blue;
}
if you want to change style of selected row use class in css
.ag-row-selected {
background-color: black;
color: white ;
border-color: gray;
}
I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?
Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?
You could realize what you want like this:
jsfiddle
input {
border: #666 1px solid;
padding: 0.5em;
}
label {
display: block;
margin-top: 8px;
}
input + i:before {
display: none;
}
input:focus + i:before {
display: block;
}
input:focus:invalid {
background: red;
}
input:focus:valid {
background: lightgreen;
}
input:focus:valid + i:before {
content: "\f14a";
}
I've used the fontawesome iconfont here.
EDIT
To make the icons inside the form elements you can add this rule:
input + i {
position: relative;
left: -20px;
}
I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.
Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?
Taken from here
$("#search_input").autocomplete({source: "/search",
minLength: 3,
select: function (event, ui) {
document.location = ui.item.url;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be
//.autocomplete( "instance" )._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
.appendTo(ul);
};
And the CSS:
.ui-menu .ui-menu-item-with-icon a {
padding-left: 20px;
}
span.group-item-icon,
span.file-item-icon {
display: inline-block;
height: 16px;
width: 16px;
margin-left: -16px;
}
span.group-item-icon {
background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
background: url("/image/icons/product.png") no-repeat left 7px;
}