When i put a p:dataTable inside a dialog with de 'scrollable = true', 'liveScroll = true', when i click this dataTable a black border appears, and i couldn't find a css that was making this happen. i didnt find anything online about this.
code of the p:dataTable:
<p:dataTable value="#{dashboardBean.listaTarefas}" var="tarefa" emptyMessage="#{msg['message.nao.foram.encontradas.pendencias.para.este.evento']}" styleClass="borderless"
scrollable="true" scrollRows="20" liveScroll="true" scrollHeight="280" >
Image of the black border:
It's not a border it's an outline, to remove it add this in your css file.
ui-datatable-scrollable-body, .ui-state-focus {
outline: 0
}
Add ui-state-focus if you want to remove outline from sortable columns, and from rows per page select menu.
Related
Hi I have the following checkbox and this checkbox should turn red border when the tool tip is shown.
The tool tip will show when clicked on submit button when the checkbox is not checked. So I want to show the user the red border for this checkbox.
The html is as below before clicking on submit button
And after clicking the submit button the html is as below.
Only the below piece of code is automatically added when tool tip is shown.
data-original-title title aria-describedby="Tooltip311812"
How to add css for "aria-describedby" and make the checkbox as red border when the tool tip is displayed. Here the Tooltip value is getting dynamically changed on every new reload of the page.
for eg : Tooltip311812, Tooltip678934 etc.
I am trying to find the solution and learn in the process. Thanks.
Use [aria-describedby="value"] as your selector.
input[aria-describedby="test"] {
border: 10px solid black;
}
input[aria-describedby="finished"] {
border: 10px solid red;
}
<input aria-describedby="test">
<input aria-describedby="finished">
I am using the tab in Materilizecss to design the Navigation tabs in my web app.
By default, the first tab is selected. This is indicated by an underlining line under the first tab, as seen in the picture below.
By default, I do NOT want ANY of the tab to be preselected! To be clear, I do not want any of the tabs to have any underlining by default as seen in the image below.
I want the tabs to be unselected by default until a user chooses one of the tabs, only then will that tab get an underlining line under it.
Unfortunately, I can't seem to find any documentation about removing the default selected tabs/underlining.
Looking forward to your help.
For remove your border bottom :
.target {
border-bottom:none;
}
And to bring up with hover :
.target:hover {
border-bottom: 1px solid red;
}
I have a project with two overlapping buttons: red button on the bottom, and yellow button on top.
The problem is that the yellow button "hides" part of the red button. I want it to be visible, yet unclickable. I need the red button on the bottom to be fully clickable, as if the yellow one on top did not exist.
Can anyone help me out with the html/css code, please?
Project link available below.
Thank you.
https://stackblitz.com/edit/angular-custom-button-4xyvp6
Use pointer-events:none
The pointer-events CSS property sets under what circumstances (if any)
a particular graphic element can become the target of pointer events.
.button2 {
pointer-events: none;
}
Forked Example:https://stackblitz.com/edit/angular-custom-button-ahemot
I want to have borders for my input box but i don't need additional borders when selecting it. I mean, before selecting the box, it is perfect but when you select it, some borders appear. i don't want them. you see what happens when i click the box:
Selection
I want my box to remain how it was before clicking it
In the image you linked to, I assume that the bottom part shows the input as you want it to be presented, with only a bottom blue border. And that the top part shows the input with a blue top, right, and left border that occurs when you click inside the input to type in it.
If this is the case, you can just apply the following css to your input:
input {
border-top: none;
border-right: none;
border-left: none;
}
I'm having a problem adding styles to a clicked link - it's an image and I want it to have a shadow once it's clicked but I can't get that to happen, neither shadow nor box-shadow seem to do anything.
I managed to get it working on jsFiddle:
http://jsfiddle.net/4GgBe/
But it won't work on my page:
http://jovansfreelance.com/booklist/list/man/Best-Stand-Alone-Fantasy-Books
You can see the link when you lick the green '1 reranks' button (it's the one with the little colored bars on it). I even tried copying the entire CSS from the page to jsFiddle, and it still worked on jsFiddle but not on the page. Can someone spot the problem?
The class on your link does not match your CSS. The class assigned to the link is "showeranks" but the CSS rule is assigned to "shower".
You just need to edit your live CSS to look like this:
a.showeranks:active{
box-shadow: 2px 2px 2px 2px blue;
}