I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?
Related
Hi I'm having Datepicker (based on the react-date-picker package) inside Material ui Dialog.Dialog works perfectly but When i click on datepicker it scrolling down and cuts off and scroll showing.
this is my Example
how do i overcome this with css
overflow scroll couldn't solved the issue because i'm having a list item
You are using the react-date-picker combined with the material-ui's <Dialog> component, and the problem is that the date-picker is rendered inside the Dialog's DOM, so it's blocked to the visible part of the dialog.
Based on the API of react-date-picker there is no way to change the element to render date-picker box, so one option is to use another date picker.
You can use the material-pickers component:
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider } from "#material-ui/pickers";
import { DatePicker } from "#material-ui/pickers";
<Dialog open={true} aria-labelledby="form-dialog-title">
<DialogContent>
<DialogContentText>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
in laying out print, graphic or web designs. The passage is
attributed to an unknown typesetter in the 15th century
</DialogContentText>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker />
</MuiPickersUtilsProvider>
</DialogContent>
<DialogActions>
<Button>ok</Button>
</DialogActions>
</Dialog>
Check it here: https://codesandbox.io/s/material-datepicker-inside-dialog-i6wts
You can find all the options for the material datepicker in the API docs.
I have fixed the issue. Note this only work for some cases. Because the cut off issue has only happened to the first row in my case. You can fix with first child in CSS
I have applied the position to the calendar only when it at first child
.react-calendar {
position: fixed !important;
top: calc(100% - 479px) !important;
}
if you are having an issue, please Modify your modal first . This only happens using on modal.
I'm just a beginner to CSS so this one came first and it worked for me . Thanks #Dekel
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css
If you look at feedly's button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/
whereas default extension buttons have no background behind it....
how do you style a custom extension button such that it has a button-like background just like the feedly button?
The <toolbarbutton> element has an image attribute that allows you to specify an image:
<toolbarbutton image="chrome://.../icon.png" label="My button"/>
However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:
<toolbarbutton id="myButton" label="My button"/>
You would have the following CSS code:
#myButton
{
list-style-image: url("chrome://.../icon.png");
}
More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images
I want to create an element using DIV and CSS like below:
Create By: <avatar image 16x16> Prashant
Can anyone tell me what will be the CSS and DIV code for above type of layout. I don't want to use tables for this, DIV and CSS only.
In Digg listing the same kind of display can be found. I tried but not able to make the "username" central align in respect of the avatar image.
<div>Created by: <img src="/images/avatars/prashant.png" alt="" /> Prashant</div>
and
img {
vertical-align: middle;
}
should do the job.
vertical-align unfortunately is not handled very consistently by some of the older browsers (pre-2005, but then yet again IE6 is still around), but David's answer is correct from the standards view.