Everyone,Hi
I really want to change the next-text ">>" which now is in pagination with another word, for example something like "Next". but there is no Inputs be exported.
How to do this?
I know this is really old, but if anyone comes here looking for the same information.
In the related css file, you can do the following:
a[aria-label='Previous'] {
span {
display: none !important;
}
&::before {
content: 'YourTextHere' !important;
}
}
The same can be done for the Next button by using a[aria-label='Next']
Just use the <ng-template ngbPaginationNext> and <ng-template ngbPaginationNext>
<ngb-pagination>
<ng-template ngbPaginationPrevious>Your text for previous</ng-template>
<ng-template ngbPaginationNext>Your text for next</ng-template>
...
</ngb-pagination>
This is documented here https://ng-bootstrap.github.io/#/components/pagination/examples#customization
Related
I just want to remove arrow icons from accordion panel headers using PrimeNG. Does anyone know how to accomplish this?
Code:
<p-accordion>
<p-accordionTab header="Godfather I">
Content 1
</p-accordionTab>
<p-accordionTab header="Godfather II">
Content 2
</p-accordionTab>
<p-accordionTab header="Godfather III">
Content 3
</p-accordionTab>
Here's an image:
Give your p-accordion a styleClass="someStyleClass" then go to your root styles and add these:
.someStyleClass.ui-accordion .ui-accordion-header span.fa {
display: none;
}
or if you use SCSS
.someStyleClass.ui-accordion {
.ui-accordion-header {
span.fa {
display: none;
}
}
}
EDIT: This is the simplest solution that I personally can think of that is not messing with the source code.
There's a property in PrimeNG, that allows us to manipulate the icons for accordion.
expandIcon and collapseIcon: to be used on <p-accordion> tag.
We may use something like <p-accordion expandIcon = "" collapseIcon= ""> and this should work like a charm.
Similarly, this could be used when we want to change the icons, as per our needs, say "+" or "-".
<p-accordion expandIcon = "pi pi-plus" collapseIcon = "pi pi-minus">
More info on https://www.primefaces.org/primeng/showcase/#/accordion
Peace
I have a "print this page" button that works fine:
<a style="top:-40;left: 375;position:absolute;z-index:5000;">
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print This Page'/>");
</script>
</a>
It is exactly where I want it and it doesn't show on the print.
I have several navigation buttons that jump to other pages:
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
These work fine, but they do print.
How can i make them not-print like the print button? I have tried several variations on modifying the print button script, but have not found the right combination yet.
Suggestions certainly appreciated. Please be very specific because I am very early into this.
You could do like suggested here.
Put this in your CSS file or add it to your style headers like you did with the "a" elements.
inside of a CSS document would look like this:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Using inline-styles within your current document would look like this:
<style>
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
</style>
then wrap your buttons in the no-print class.
<div-class="no-print">
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
</div>
Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).
It appears only when the text field is focused (see update) and is applied to both input types text and search.
It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.
Does anyone know how to remove or replace this new feature?
<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">
Update:
The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
As others have mentioned ::-webkit-calendar-picker-indicator { display: none } works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,
To remove just removing the datalist input would be:
[list]::-webkit-calendar-picker-indicator {
display: none;
}
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
It's work for me; (use display:0 not work on chorme)
datalist::-webkit-calendar-picker-indicator {
display: none;
opacity: 0;
}
It is okay but this css code will hide any calander on page.
Like I'm using datepicker calender and this will also hide the controls including datalist and datetime picker.
Set the list option of parent input to be empty, <input list="" ... /> , eg :
<input
list=""
name="option"
id="input"
autocomplete="off"
>
<datalist id="datalist">
<option>Carrots</option>
<option>Peas</option>
<option>Beans</option>
</datalist>
see mdn customizing_datalist_styles example
try -webkit-appearance: none that should remove the default styles
I have a page where I don't have access to html who content this:
<span id="page_title_text">Welcome - Overview</span>
and I would like get this:
<span id="page_title_text">Overview</span>
Due to the fact I cannot simply modify the text in the code itself, I wondering if is possible to hide the text "Welcome -" with css only (I have access to css related file).
Any suggestion ?
thank
You can just update the text or do an actual replace:
Update Text
document.getElementById('page_title_text').innerHTML = 'Overview' ;
Replace
document.getElementById('page_title_text').innerHTML =
document.getElementById('page_title_text').innerHTML.replace(/Welcome -/,'');
jsFiddle
#page_title_text:before {
content: "Welcome - ";
}
People don't seem to be understanding your question...
I'm not sure if this can be accomplished elegantly.
You can try something "hacky" like this though:
#page_title_text {
position:absolute;
top: -15px;
width: 70px;
}
#page_title_text:first-line {
color:white;
}
JSFiddle
Of course this answer assumes existing styling etc. And it doesn't get rid of the textual content as well. There are just ways to hide it (with coloration or positioning etc.)
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}