I would like to "graphically disable" a combobox in extjs by appling a CSS class to remove the borders while the user does not click on it.
How can I apply this CSS class? It is not the border of the field but of a wrapper which wrap both field and picker.
(I have the same problem for datefield)
Ext applies special CSS classes when fields are focused, so that's rahter easy to do focus-dependent styling. Use dev tools to explore the markup and see what you need to change.
For example, for removing all visual clues that it is a field from a combo that is not focused, use this CSS (example fiddle):
.custom-combo .x-form-field:not(.x-field-form-focus) {
border: 1px solid transparent;
background: none;
}
.custom-combo .x-form-item-body:not(.x-form-trigger-wrap-focus) .x-form-trigger {
background: none;
border-bottom: 1px solid transparent;
}
I use border: 1px solid transparent instead of border: 0 to prevent a 1px offset when the combo get focused.
Related
So I'm using ant.design to create my navbar. Initially, ant's menu items have a underline when either selected or hovered upon (this underline is a blue-ish border-bottom). I now want to change this underline's color to suit the rest of my design. I managed to change the bar's color when selected by targeting a specific class like this:
&& .ant-menu-item-selected::after{
border-bottom: 2px solid #659e38 !important;
}
However, I want the color changed also when hovered upon, but when I target the menu item like this:
&& .ant-menu-item:hover{
border-bottom: 2px solid #659e38 !important;
}
I get a undesired result of:
How can I get what I want? Note that I'm using styled.components for styling.
The solution was to change:
&& .ant-menu-item:hover{
border-bottom: 2px solid #659e38 !important;
}
to:
&& .ant-menu-item:hover::after{
border-bottom: 2px solid #659e38 !important;
}
this is (I believe) due to bar's being created as a pseudoelement by ant.d.
I am unable to add borders to the tabulator table using the tabulator 4.2.3 css file.
I've tried changing the -is-bordered classes but the displayed table show no border. I find the Bulma theme pleasing but need borders to make it more table and data entry friendly for my users.
CSS section referenced below:
.tabulator.is-bordered {
border: 1px solid black;
}
.tabulator.is-bordered .tabulator-header .tabulator-col {
border-right: 1px solid black;
}
.tabulator.is-bordered .tabulator-tableHolder .tabulator-table
.tabulator-row .tabulator-cell {
border-right: 1px solid black;
}
I thought I would have 1px Black border around each cell and header, but it still shows as no border.
The is-bordered class is working in v 4.4.3.
Are you sure you are only including the tabulator_bulma.css. if you include the tabulator.css as well the two will fight against each other.
Table border isn't supported in HTML5, but CSS will apply changes to all of my tables, instead of just 1, is there a way around?
I want to make one table to have borders but the "table border" option is not supported in HTML5, what should I do?
CSS will make changes to all of my tables, instead of just one... is there a way around it? :)
For the border, I think you can do :
table {
border: 1px solid black;
}
/* or, for each cell of your table */
td {
border: 1px solid black;
}
If you want to add this style to only one table, then just add a class to this table, and instead in the css something like :
.your-class {
border: 1px solid black;
}
Hope I could help,
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
I have a qtreewidget in my application. I have set the stylesheet like below for it.
setFrameShape(QFrame::NoFrame);
setStyleSheet("QTreeView { border: none; background: transparent; outline:none; }" "QTreeView::item:!selected:hover { border: 1px solid #AAAAAA}" "QTreeView::item:selected { border: 1px solid #0053A6}");
Now the problem is that there is no border around qtreewidget which is correct behaviour but when I click on any item of this widget a black border appears around the widget. Although I have mentioned the border for this widget to none then why it is appearing on clicking any item.
This is a focus rectangle. To completely disable it:
setFocusPolicy(Qt::NoFocus)