I installed Infragistics 2012 and added a WebDropdown to my web page. When I hover over the webdropdown the dropdown gets a little bigger and the arrow image disappears. This is for Internet Explorer.
When I try on Firefox the dropdown size stays same but the arrow disappears and I can not click on it. Any ideas?
PS: I have a virtual directory under IIS which points to the ig_res styles folder.
Make sure that you have the image that is being used for the hover image in your images folder within the style library. The image should be named igdd_DropDownButtonHover.png and should be in ig_res/[styleset]/images.
If the image is indeed missing, you will need to copy it from the style libraries that Infragistics provides. If the image is present you should use the network tools of the browser or fiddler to see what the response is from the server when that image is requested.
Related
The current workflow for our designer is:
Opens web page and edit the CSS
Write up all the CSS changes in an issue
Is there a way for chrome to save the 'diff' of the CSS and export it without using workspaces?
As of Chrome 65, Local Overrides can help with this. Check your Chrome version at chrome://version. If you don't have 65 yet, you can use Chrome Canary.
Open Sources.
Click Local Overrides tab.
Click Select folder for overrides and choose a destination.
Make your changes in the Styles pane on Elements panel or Editor pane in Sources panel. Chrome saves the changed files to the specified location.
GOTCHAS!!!
Changes made in the DOM Tree on the Elements panel don't get saved.
Neither do changes made in the Styles pane when the source of the CSS rules is a <style> tag in HTML. At least in Chrome 65. There's rumors that this may get fixed in 66.
Not sure if that's what you want, but...
You can edit the page from inspector (ctrl+shift+I) and after done with all your changes, just click on the stylesheet link at your left and copy everything you need
In my summernote editor I have the problem that the font icon isn't working while I see it back in the html. I am wondering how to fix this issue?
Thanks!
I faced this problem a while ago and solved by:
The fonts used by summernote is not the bootstrap one. They have their own font directory. One can check the console (Ctrl+Shift+I) in web browser for any error. One may have to edit the summernote.css file if they are not located in the default folder for Summernote like adding "../" in front of all the font references at the top of the css file.For my application, I had put it under /static/css/font for the server to find it.
To check whether the server is able to find the directory, one can also check the network by right click -> Inspect element-> change to network tab:
In my Google Chrome version 38.0.2125.104, stylesheet filename/linked css has been disappeared. I'm not sure if updated version removed this or there is somewhere to set this up again, but when i restored to default, still it does not appear.
To make it clear to you guys, This is an example of old version Style Panel which have the link to the related stylesheet (filename & line) next to the class name.
http://i.pictr.com/7g52x66rw8.png (i cant attach images here yet)
and below is the latest Style Panel. Each classes usually have link to the CSS stylesheet .
http://i.pictr.com/sks0tp1sem.png
Any idea on how to enable back the stylesheet link?
Thanks in advance.
when you open the inspect element on the top right side of the dev eloper tools panel you have a cog wheel (settings). click that and go to general setting s tab and check out the elements section and sources section and see if all the boxes that needs to be checked are checked.... in mine i have the source maps box checked and enabled
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.
I have a mobile web application (.NET MVC) and I'm using JQuery Mobile (beta 3 & jQuery 1.6.3). My question is regarding the attribute 'data-icon' on various elements. For example, I have an element:
Home
When I run the application locally, everything appears as expected. There is a small circular button with the 'home' image inside. When I deploy my application to my host (Arvixe), this same button renders as expected in Chrome, but does not render as expected on my mobile phone (Nexus One). On my phone, the home icon image does not appear at all.
JQuery mobile is referencing the image sprites in the following manner:
background-image:url(images/icons-18-white.png);
I can verify this image does in fact exist in the proper location, as it appears on the desktop browser, I can get to it with a URL (Desktop and Mobile) and my host log shows that requests to that URL are coming back with a 200 response. I have even connected my web application, while hosted to a weinre server, and I can verify the DOM element does have the correct image path. What's even stranger, is that when I go to jquerymobile.com on my phone, the same icons appear, the problem seems isolated to my hosted site.
Is there something I'm overlooking? Thanks.
I think I may have solved this. When upgrading from jQuery mobile beta 2 to 3, I did not upgrade the corresponding images as well. Grabbing the updated images seems to have done the trick.
Plese place your images folder (which will come from jquery-mobile downloaded zip file) along with your css files.
Ex: If you have copied the .css files to some location named
d:\project\styles\jquery.mobile-1.x.x.css
Then please place the images folder as show below
d:\projects\styles\images
you need to set data-role="button" on anchors for them to appear as buttons with jQM (jQuery Mobile).
see here
Home
this is the only thing I can think of.
The latest jquerymobile has fixed this issue. If not, you need to check the following steps.
check images folder of jquerymobile and jquerymobile CSS are in the same directory
If you put jquerymobile CSS in separate folder, you need to change "path" in this stylesheet