How to disable inner-outline on selected table cell in Firefox - firefox

Using Firefox on OSX when I cmd+click on a table cell I get an blue inner outline.
I searched for a way to disable this behavior on my web application but didn't found anything.
I tried to capture the onclick or set the CSS outline to 0px to no avail.
I also looked at MDC Mozilla CSS extension but many are undocumented.
Is there a way to remove this inner outlinein a given HTML doc?

You must set CSS property -moz-user-select to none of the container table element.
table {
-moz-user-select: none;
}
This will not only disable cell selection but will also unable you to select text inside the table.

Related

Need to override style of ngx datatable in two different pages not impacting each other

".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.

Oracle APEX: Scale image to screen

I would like to scale an image that is saved in Shared Components so that the right side of it is exactly on the right end of the screen.
How is that possible?
I am using Oracle APEX 5.1.
I am assuming you are displaying the image in a Display Image page item.
In the item properties, under Advanced, set the Custom Attributes property to:
style="width: 100%"
This screenshot shows two Display Image items based on the same small picture (held as a static application file). The second has the style property:
See my demo page on apex.oracle.com
Alternatively, this could be done using CSS defined in a file or in page inline CSS like this:
#P123_MY_IMAGE_ITEM {
width: 100%;
}
Or you could set the item's CSS Classes property to e.g. "full-width" and define the CSS as:
.full-width {
width: 100%;
}
This is probably the best option if you will do this to many images.

fullpage.js how to create slide custom image navigation dots?

I am using fullPage.js fullpage slider in my project. but i need the customized image as navigation dots. I searched the fullPage documentation also. but i cant find out the solutions. Anybody know about this, Thanks in advance.
Use this code and it will solve your needs.
.fp-slidesNav ul li:hover a.active span{
background-image: url("../img/bullets.png");
height: 22px;
width: 22px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
This css code enable bullet images on your slider.
You can use the menu option.
You can create any kind of menu / nav with it and it will add the active class where it should.
From the documentation:
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:
Just use a class if you want to have multiple menus / navs.
menu: '.myNav'
Otherwise, you can also use the fullPage.js callbacks or the fullPage.js state classes to activate and desactivate the elements of any nav or menu.
Check this answer here.

Table Align Centre does not Align Centre

I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}

opacity not working for img pointed by Hyperlink

In an asp.net applicaiton I am using Hyperlink which points to an image. On certain condition I am setting its
"filter" property to alpha(opacity=70) for IE
and "opacity" prop to 0.7 for Firefox
so that it is shown dull to depict disable mode. This works fine in FIREFOX ie it shows dull in disabled mode but not in IE.
I see that the filter property is set on anchor tag and not on img tag present inside anchor. If I explicitly put the filter on image it works. But I am not able to do that programatically.
Any idea?
If you're not already, I would create some on/off CSS classes for the filter and then dynamically change the class that gets assigned based on your conditions. Then you may want to try putting each link inside a div and assign the classes to the div tags.

Resources