I am trying to remove element style from woocommerce ordering form, but i couldnt find the form template ( where the inside element style is given).
I only found out woocommerce-ordering.php but there are no classes or styles inside it.My purpose is
For Example <span class="customSelectInner" style="width: 218px; display: inline-block;">Default Sorting</span>
I want to set the width to auto , I know it can be achieved by using !important.
But it loads the element style first , then switch width to auto , so it looks very weird.So i have to edit the template file.
If you are not able to find file for it then just use simple jQuery for this
jQuery(".customSelectInner").css("width","auto")
Related
I am using PrimeNG for my project I used p-dropdown with appendTo body only for particular components files, and I changed the css in only one file as follow, for example
geneFinder.component.scss
.ui-dropdown-panel {
z-index: 999 !important;
}
and component file is
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>
But this css is affecting in all other files also. If I removed the !important it is not affecting in other pages and this is not working with particular component itself. How to fix this issue.?
you can try this
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>
You can also customize the z-index with the p-dropdown attribute baseZIndex. This way, you don't need to set it in css, and it affects only the dropdown where the attribute is set.
Angular is a single page application framework hence all the CSS would be combined and CSS styles will be created inside style tag of the single html page. If we are having a CSS class with name that is common to other component's elements it does affects it.
In case of component specific CSS, create a custom class name something like,
.mycomponent-ui-dropdown-panel {
z-index: 999 !important;
}
and add the class to the element of the component's html where we need this change to be applied. This will make sure that other elements of other components are not affected by the CSS style.
I fixed the issue by adding the panelStyleClass in my component,
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>
.overlay-zindex{
z-index: 999 !important;
}
How do you set the height of the Angular UI-Select widget when an item is selected. I have a custom template for the selected item that includes an image and stuff and it gets cut-off.
Is there an option somewhere? I feel like it should expand to fit the template.
I just fixed this by using the css like
.ui-select-choices .item {
height: auto !important
}
and using the !important css function because ui-select has a lot of inline styles and it gets very tedious to fix. If you are using your own template, try not to use the .item class and use something unique like .select-choice-item Next time you might want to provide the structure in the template you're using so we can answer you with a more specific solution.
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.
I have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.
I am trying to do the following:
I have set up a number of Magento attributes for my products & I want to display an icon next to an attribute called "Color" as well as attach an alt tag to this icon/image. My theme has each of the attributes set up as a dt tag, & so the css I am trying to apply is as follows:
dt[foo^="Color:"]{background: url(http://xyz.com/skin/frontend/default/default/images/warning.png) no-repeat 100% 0%;}
and here is the markup:
<div class="white-box-inner">' '<dl class="attribute-list clearfix">``<dt class="first">Size:</dt>``<dd class="first">21</dd> <dt>Manufacturer:</dt>``<dd>Hat Designs</dd>``<dt>Color:</dt>
<dd>Red</dd>``<dt>Fabric</dt> <dd>Felt</dd> </dl> </div>
This however does not display the icon I'd like to appear.
I'm also not sure how to have an alt tag associated with this icon either via css. I'd rather not mess with the template files. Any help is appreciated.
Thanks.
-TM
From your markup it looks like you're trying to select an element by its content. Attribute selectors only select by attributes; they don't select by content.
There was going to be a :contains() pseudo-class, but it was dropped from the spec and so you can't do this using CSS selectors anymore.
jQuery implements :contains(), though, so you could simply use jQuery to add a class and style that class.
Additionally, you cannot associate alt text or a tooltip to a background image in CSS. You're going to have to go through the JavaScript route to achieve this.