I'm a CSS beginner and I struggle with this problem :
in a table, I have a CSS to display a line when I'm hover a row...
But if I'm hover a specific cell (the second column from the left in my example), I want the row line to hide
I cannot fix that
pict example
this is the code I use
.secondCell:hover {
text-align: left;
border-bottom: solid;
border-bottom-color: blue;
border-width: 1px
}
.tabulator-row.tabulator-selectable:hover {
border-bottom: solid;
border-bottom-color: #FD9A00;
border-width: 1px;
}
thanks
If I understand you correctly, I'd suggest a solution like this.
tbody td:not(:nth-child(3)):hover {
/* your hover properties here */
}
The :not() selector will not select an element if whatever inside the parentheses matches.
The :nth-child(x) selector selects a specific child. It also accepts odd org even as an argument.
In the future, please be more specific and provide an example of your HTML as well. It's hard to provide help when there is little to go on.
Related
Im looking to create a demosite (http://emc.ow-media.de/main)
I want to create a grey border (#eeeeee) around the Post Grid-Elements in the top and the bottom.
Where is my mistake?
I set Custom CSS for the bottom post-grids like this:
.layer-wrapper layout-105
{
background-color: #eee;
} ```
If i understand it correctly you need to change the selector to: .layer-wrapper.layout-105
You are basically trying to select an element inside the .layer-wrapper called <layout-105>, that of course does not exist. When you want to select a class don't forget the dot in front. In this case you want to select an element with two classes applied, so don't use a whitespace between the classes.
if you want to add border use border property not background
you forget to add "." in layout-105 & both class combine with "." not use space betwwen two same div classs.
Result
https://ibb.co/74hjDjK
use this:
.layer-wrapper.layout-105 {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:
.mapboxgl-Popup-content {
color: #F3F3DD;
background-color: #91785D;
border-color: #91785D;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';
}
This yields these pretty little boxes:
My issue is the white triangle at the very bottom that points to the marker. I want to change its color.
I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.
Here's what you need. It's not just one class because the tip can change position:
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: #fff;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: #fff;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: #fff;
}
The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.
I figured out why applying CSS doesn't affect the element (in this case, the tip).
I did some debugging in Chrome with Inspect Element.
It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.
At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.
This was not true.
Inspect element still showed my CSS was being overridden.
The solution was to add !important:
border-top-color: black !important;
This would override any previous styling done by MapBox.
For more info see:
What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp
.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }
i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).
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.
In an web project that I'm working on we use JavaScript to render big, complex web pages. We are currently working on a way to be able to move parts of the page to another tab/ send the content as a string and render the same content on another computer/browser looking just as the original page.
We could use the same scripts to rerender the page but when rerendering performance is of utmost importance and therefore we want to avoid it. So our approach has been to iterate over the relevant elements and abstract the elements together with their current styling using getComputedStyle(). This method works well, however we have encountered some problems including pseudoelements.
To include them we have gotten the styling using
getComputedStyle(element, ':after');
which works well in Chrome. However, In IE and Microsoft Edge this only works most of the cases. One case that does not work is if the pseudo element has a border. Then the border-style is not included in the CSSStyleDeclaration returned from the function.
So my questions are:
Are there any better ways to get the pseudo element stylings that bypasses this problem?
Is there any other(better) approach to the problem at hand?
Minimal example reproducing the error in fiddle. When clicking the button Chrome outputs:
border-bottom: 1px solid rgb(255, 0, 0)
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: solid
border-bottom-width: 1px
while Edge outputs:
border-bottom:
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: none
border-bottom-width: 1px
I'm sure you have solved this another way by now... but as the problem still exists today in Edge; here is a work-around for it.
The issue is that for border-style IE is returning the parent elements value instead of the pseudo elements, so if you set the style there, and give it no width, the pseudo element will inherit it. Extracting from your fiddle to example...
#pseudo-element-test-id {
position: relative;
border-bottom: 0 solid;
}
#pseudo-element-test-id::after {
position: absolute;
top: 15px;
left: 0;
content: " ";
width: 150px;
border-bottom: 1px solid red;
}
Im trying to do a simple :focus effect for all my INPUT elements, like so:
INPUT:focus { border-color: orange; }
This works great, until I add this bit of CSS to the style sheet:
.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial;
font-size:14px;
padding:3px;
}
Now once I add the above, the focus effect doesnt work on any input within the form_container class, when I take the above out it works.
I can get the effect to work by specifying the class for the INPUT like so:
.form_container .col2 INPUT:focus { border-color: orange; }
But I dont understand why I have to do this? I want to control all INPUT effects like i do in the first example
if any one can shed some light on this
thx
That's because
.form_container .col2 INPUT
is more specific than
INPUT:focus
In CSS, more specific rules have higher priority, no matter what the order is in which they were declared. Rules that are equally specific (the same number of selectors usually), the rule declared later overrides or adds to rule declared first.
You could specify !important on your border style for the second rule, but it's not supported in all browsers (did I hear IE?)
In your first rule you're declaring the border color. In your second rule you're overriding it. You could try something like
INPUT:focus { border-color: orange!important; }