Simple question... how I can resize p-checkbox?
Without primeng I did something like
<p-checkbox style="transform: scale(2.0)"></p-checkbox>
But with primeng Im getting
Error: Cannot find a differ supporting object 'transform: scale(2.0)'
at ...
How to make checkbox bigger then?
You can do it by simply overwriting their css. First, change the size of the checkbox.
You have to set both classes below for the checkbox to be centered:
body .ui-chkbox {
width: 25px;
height: 25px;
}
body .ui-chkbox .ui-chkbox-box {
width: 25px;
height: 25px;
}
Then you can modify the size of the checkmark:
body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
font-size: 20px;
}
And if needed you might also want to change the offset of the label:
body .ui-chkbox-label {
margin: 0 0 0 0.8em;
}
This solution might not fit all scenarios but it worked for my case.
/*Increase p-checkbox size*/
:host ::ng-deep .ui-chkbox .ui-chkbox-box {
width: 2em;
height: 2em;
}
You can specify width and height in the CSS, for example:
.p-checkbox .p-checkbox-box {
width: 14px;
height: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
font-size: 8px;
}
Related
I am currently working on the CSS-styling of a Warning statement.
This is a icon + a statement in this specific case. The code is as follow:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
It works all fine, but now my question!
Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.
Now it would be great if I can manage a import at var-ID level.
I was actually wondering if css can do this.
cheers,
Frank
Are you using a CSS preprocessor like SASS or LESS?
Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.
Another suggestion is that you can maybe add a class for each language and then change the content based on the class.
eg:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
$sSCP .warning.french:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ATTENTION"; /* <-- Font icon + statement*/
}
$sSCP .warning.spanish {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ADVERTENCIA"; /* <-- Font icon + statement*/
}
I am new to WordPress . I used a plugin contact form 7, And I need to adjust its width of fields. for now it is 100 % width.
By doing some google I came to know that I need to edit custom CSS for this and I added these lines but still nothing
input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
And i am using avada theme
I have solved the problem using this:
.wpcf7-form.init label{width:100%; max-width:inherit;}
input[type=text], #respond textarea, .post-password-form input[type=password], .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-quiz, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
width: 59%;
margin-bottom: 24px;
padding: 17px 30px;
border: 1px solid #ccc;
outline: 0;
font-size: 15px;
color: #797979;
font-family: "Crimson Text",serif;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You have to change the "width" element, in percentage.
Inspect the text field on browser and apply the same style to the class assigned to the input as per scope. I think the contact form input usually has a class name "input". Something like this might help
.et_pb_contact p input
{
background-color: #fff;
color: #000;
width: 50%;
}
It might not work because the plugin css styles are overridden by other styles. You might need to either add !important to your property as shown below.
input[type="text"] {
background-color: #fff;
color: #000;
width: 50% !important;
}
This is usually not recommended see this article https://uxengineer.com/css-specificity-avoid-important-css/.
The best approach is to add a class or id before the css style to apply the styling only to that element. See the full code below:
#form_container_with_contact_form input[type="text"] {
background-color: #fff;
color: #000;
width: 50%;
}
If you wanna adjust all your fields to be 100 % width, you can simply use this css:
input {
width: 100%;
}
If you need to specify certain fields:
input[type="text"] {
width: 100%;
}
As mentioned, there's a styling guide.
I have an input box, which is quite small when it's loaded and I want it to resize to become bigger when the user clicks on it (with CSS).
The CSS code I have is:
input.tagInputField {
box-sizing: border-box;
border: none;
background-color: #fff;
width: 2em;
color: #000;
font-size: 14px;
}
input.tagInputField:focus {
width: 50px;
}
But it's not working... no response... Any ideas?
Thanks!
UPDATE
the html code (sorry for the pic, it was the fastest to get it this way)
It worked. Some other styles were overriding this one, so as per #putvande suggestion I checked that and added !important
input.tagInputField:focus {
width: 50px !important;
}
I've generated some labels using HTML and CSS which I intend to print onto to pre-printed label paper. The labels should have a fixed width of 45mm * 35mm, which I've set in CSS, but when printed they come out at different sizes.
I've also tried converting the HTML to a PDF using HTML to PDF, but this hasn't helped. What am I doing wrong?
My Html:
<html>
<head>
<style>
#media screen , print {
body {
margin: 0;
border: 0.264583333mm solid green;
}
.table_style {
width: 100%;
}
.table_style td {
text-align: left;
padding: 0 0 3.175mm 5.291666667mm;
}
.space {
height: 2.645833333mm;
}
.div_print {
width: 63mm;
height: 37.735416667mm;
margin-top: 3.735416667mm;
border-width: 1px;
border-style: solid;
border-color: red;
}
.part_dec_print {
font: 3mm arial;
text-align: left;
padding-left: 1.5875mm;
height: 8.5mm;
}
.p_tag {
height: 100%;
vertical-align: middle;
padding-top: 1.5875mm;
}
.qty_span {
padding-top: 1.5875mm;
}
.part_print {
font: 6.5mm arial;
height: 6.5mm;
text-align: left;
padding-left: 1.5875mm;
}
.bar_print {
padding-left: 3.96875mm
}
.qty_print {
font: 6.5mm arial;
text-align: center;
height: 6.5mm;
}
.date_print {
font: 2mm arial;
text-align: right;
padding-right: 4.645833333mm;
margin-top: 4.995833333mm;
height: 2mm;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="div_print">
<div class="part_dec_print">
<div class="p_tag">REAR FABRIC SCVR</div>
</div>
<div class="part_print">PZQ22-12100</div>
<div class="bar_print">
<img alt="testing" src="http://anybarcode_image_here201x29.png">
</div>
<div class="qty_print">1</div>
<div class="date_print">23A4</div>
</div>
If the problem is differences between browsers (as I think it is now from your comments), then the issue is that your widths include fractional measurements, e.g. 4.645833333mm.
Each browser round decimals slightly differently as discussed here - there's no guaranteed away around it other than to not include fractional widths.
What about creating a PDF in PHP (with something like dompdf) and then styling the PDF so it has the correct widths and heights for your label cells. The PDF and styled formatting should always be the same size no matter the browser.
From device preferences, you have to set page size according to your label and it will work. I just did it for TSC TA210 device!
page size css never work in this case! it will print lots of empty label for you.
for all the classes below I have set a fixed height of 120px. Is there a way to control the height of all of them with one single class (class or something else) ?
I know I could do .header, .logo, .etc { height: 120px } and remove the the height from all the individual items but that would still not look like the most efficient solution. Thanks
.header {
width: 100%;
height: 120px;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
position: fixed;
z-index: 999999;
}
.logo {
vertical-align: middle;
line-height: 120px; /* this is set to same height as the div */
left:0;
height:120px;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
}
.drop_menu {
background:red;
padding:0;
margin:0;
list-style-type:none;
height:120px;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
You're going to have to use javascript for this, because CSS simply won't cover the type of interaction you want. First of all, if you want to set the height of several classes to one value simultaneously, you have two options:
Change the height of every single class using Javascript or jQuery. For example: $(".header, .logo, .dropmenu").height("80px");.
Make toggle a new class that applies to all elements. For example, if your class was defined as newClass {height: 80px;}, then you could do $(".header, .logo, .dropmenu").toggleClass("newClass");
See this link for more info about multiple selectors, and this link for more info about changing height, and finally this link for more info about toggling a class with jQuery. Of course, there are ways of doing this with just stock Javascript, but I personally prefer jQuery because it simplifies everything up a lot.
As for applying a class when scrolled to a certain height the following code or something similar could suffice:
$(".header, .logo, .dropmenu").scroll(function(){
if ($(".header, .logo, .dropmenu").scrollTop > 20){
$(".header, .logo, .dropmenu").toggleClass("newClass");
}
});
you can give one class to all three elements in html like
<div class="logo some_other_class">
<div class="header some_other_class">
<div class="dropmenu some_other_class">
and if you are using jquery you can change height like:
$(".some_other_class").css("height", "80px");