I am using PrimeNG and find a way to set the background-color of a p-inputNumber control.
It is working fine with pInputText.
<!-- OK -->
<input pInputText type="text" style="background: red;"/>
<!-- Not OK -->
<p-inputNumber [showButtons]="true" style="background: red;"></p-inputNumber>
Thanks for the hint!
I found the inline attribute too.
<p-inputNumber [showButtons]="true" [inputStyle]="{background: 'red'}"></p-inputNumber>
p-inputNumber is a component rather than a simple input element and it style in different way base of the documentation page you can add a class for the internal input element by using the property inputStyleClass
add the css class in global style file
style.css
input.bg-red{
background:red;
color:#fff;
}
template
<p-inputNumber inputStyleClass="bg-red" [(ngModel)]="value1"></p-inputNumber>
stackblitz demo 🚀🚀
Related
I'm using tailwind css to style a little angular app, the problem is:
i want my form to have a fixed position at the bottom of the page but it seems that classes like "top-100 left-50" are not working
home-component.html
<main class="container bg-green-200 h-full m-auto">
<app-search class="fixed top-100"></app-search>
<app-fruits-cards></app-fruits-cards>
</main>
searchbar-component.html:
<form *ngIf="searchForm" [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="bg-slate-100 rounded p-3">
<label for="searchInput">Search</label>
<input formControlName="fruitName" type="text" id="searchInput" class=""/>
<button type="submit" class="rounded-full">search</button>
</form>
I actually tried to use the "top-100" class into the form element directly but it still doesn't work, what am I doing wrong here?
Try adding position relative to the container
Also i'm not sure about top-100 ...
check here what values are allowed with the classes of top ..
https://tailwindcss.com/docs/top-right-bottom-left
There is no default defined class top-100 the most near to it is top-96 but you can define your default in tailwind.config file or use custom value like top-[100px]
Read about:
Adding arbitrary values here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
Defining classes in the config file here: https://tailwindcss.com/docs/configuration
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I'm working with primefaces on a screen where I used calendar and autocomplete
I got the UI from the designer and started integration, I assigned styles like this
<p:calendar styleClass="xyz" />
the output is
<span id="bla" class="xyz" >
<input type="text" class="some other classes here" />
</span>
so my styles all fail
Now I need to apply styles on input directly instead of the spans
Can you solve it by rearranging your CSS?:
.xyz input {
/* some weird styling here */
}
This is problematic if you rely on Bootstrap CSS for example. Form controls needs the class form-control, but when you add styleClass="form-control" for p:calendar, the surrounding span gets the class instead of the input, which totally messes with the design. I think there should be a inputStyleClass attribute for the p:calendar tag, the same way there is a tableStyleClass tag for p:dataTable.
This worked for me using jQuery to add the form-control class to the input field:
$(".mycalendar input:first-child").addClass("form-control");
p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />
You can use this trick if you are using material design:
:host /deep/ .ui-inputtext{
/* Your Crazy Custom Style*/
}
I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>