I am using bootstrap datetimepicker and want to remove the cell border around the days and months.
Here is what I have tried so far:
.bootstrap-datetimepicker-widget td {
border: 0px !important;
}
I have also attached an image to show the borders that I am trying to get rid of.
Any help is appreciated.
In CSS, you may create a border-like effect using at least 3 properties. Not knowing more about your case, try:
border: none;
box-shadow: none;
outline: none;
Maybe with !important.
Related
See the Example image
I am using the primeng component in my application it has css class p-component. Whenever I click on any field whether it is button or input or any other field It got highlited with blue color border. I don't need that So I tried to use outline:none but it doesn't work out.
Apply the following CSS to remove auto highlited blue color
input:focus {
box-shadow: none !important;
}
It'd be good if you can post your code so that we can get a 100% correct answer to you. However, looking at PrimeNG's website it seems as though the .p-inputtext:enabled:focus selector is setting the following
box-shadow: 0 0 0 0.2rem #BFDBFE;
border-color: #3B82F6;
So add a rule to your own css below the linked PrimeNG css file with the following rule
.p-inputtext:enabled:focus {
box-shadow: none;
border-color: initial;
}
I can check this for you if you post up your code, though.
I am struggling to remove all Bootstrap 4 native styling from the Bootstrap .card component. There is a chance that it is actually not related to Bootstrap, however I do see it in Edge as well.
Please help me remove this blue line displayed on a selected .card-header!
I have tried various overrides like below:
.card-header {
background-color: white;
border-color: orange;
border: 1px solid orange;
padding: 0;
padding-bottom: 5px;
text-decoration: none;
}
Thank you!
What you are seeing here is accessibility styling that bootstrap has added to help users see where there are currently focused on the user interface. The collapse component your using also uses the card component as well.
Although I don't recommend it, you can remove the accessibility styling no different than removing other styling like you showed above, however you need to access the pseudo class.
This accessibility styling is done through the pseudo element focus.
You can access the pseudo properties of a class by adding :focus at the end. In this cases the styling is done on a class called .btn. To change only buttons within an collapsible elements do the following.
.card .btn:focus {
box-shadow: none;
}
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 am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.
I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.
This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?
jsBin Example
.custom-dropdown .k-item {
background: white;
font-weight: lighter;
padding: 0 4px;
border-left: solid 2px white; // add this
}
.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
color: black; // and add this
border: solid 1px white;
border-left: solid 3px #b91d47;
}
I think there nothing to do for strange curvature.
http://www.w3schools.com/css/css_border.asp
http://jsbin.com/elOSuDo/1/edit updated jsbin
I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)
.k-treeview .k-in.k-state-hover{
background-image:none;
background-color:#fff;border:none;
}
.k-treeview .k-in.k-state-selected{
background-image:none;
background-color:#fff;color:#000;border:none;}
Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?
With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...
.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
border-style: none;
border-width: 0;
padding: 2px 4px 2px 3px;
}
Coupled with the use of .k-state-disabled, it appears I might have found a slightly better CSS solution.
The nodes don't move at all, and it appears completely disabled.
.k-treeview .k-in.k-state-hover,
.k-treeview .k-in.k-state-focused,
.k-treeview .k-in.k-state-selected {
border-color:transparent;
background-color:transparent;
}
I've also added some JavaScript to prevent the expanding of the nodes, and disabling of the checkboxes.
In my case this helped:
.k-window-action .k-state-hover {
border: none;
background: none;
}
P.S.: "border-color: transparent" caused slight move on hover