I want to use GWT Canvas to draw a dashed border around a canvas element like Rectangle.
I like the style that the css attribute border: dashed produces, especially the way the corners are displayed, like seen here: https://developer.mozilla.org/en-US/docs/CSS/border-style
Can the "source" code of how this dashed line is produces be inspected somewhere?
Found this function in the Firefox source: nsCSSRenderingBorders. I don't understand the code, but the answer probably lies in there.
http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRenderingBorders.cpp
If you want that styling for your borders :
element.style {
background-color: palegreen;
border-style: dashed;
}
or
element.style {
border-style: 2px dashed #000;
}
Is this what you want ?
If you want a java function to do so, or some place to start to 'study' go here gwtcanvasdemo. and there is a link to the sources. Also, another post on SO related to the subject dotted stroke in canvas and then, there is /DashedLineRenderer.java
Related
Im looking to create a demosite (http://emc.ow-media.de/main)
I want to create a grey border (#eeeeee) around the Post Grid-Elements in the top and the bottom.
Where is my mistake?
I set Custom CSS for the bottom post-grids like this:
.layer-wrapper layout-105
{
background-color: #eee;
} ```
If i understand it correctly you need to change the selector to: .layer-wrapper.layout-105
You are basically trying to select an element inside the .layer-wrapper called <layout-105>, that of course does not exist. When you want to select a class don't forget the dot in front. In this case you want to select an element with two classes applied, so don't use a whitespace between the classes.
if you want to add border use border property not background
you forget to add "." in layout-105 & both class combine with "." not use space betwwen two same div classs.
Result
https://ibb.co/74hjDjK
use this:
.layer-wrapper.layout-105 {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
Hello is it possible to control how many dashed lines would be under the word?
I have something like this:
<p>Duza</p>
p {
border-bottom: 4px dashed #999;
display: inline;
font-size:20px;
}
And the effect that I want to have:
JSFIddle
You can not control the length of CSS dashes or the space between them. (See this question and this question)
Solutions could be:
Use more than one word to allow room for the dashes
Use dotted rather than dashed
as the links above point out, you could possibly use a gradient or an image
jsFiddle Demo
Some other CSS files removed the border around all GWT CaptionPanels. Now I'm looking for a way to add the CaptionPanels border again through the GWT projects .css file. Do you have an idea how to do it? Simply adding a .gwt-CaptionPanel{} to the css file has no effect...
I'm answering my own question here.
It took me some time to figure out that GWTs CaptionPanel uses a fieldset under the hood. The following places a red 1 pixel solid border around GWT CaptionPaneles:
fieldset {
border: 1px;
border-style: solid;
border-color: #ff0000;
}
Im not experienced with GWT CaptionPanels but you can try to set an !important on the class that makes the borders in the main style sheet. So you get something like: .borders {border-width:1px !important}
After searching for a while I saw that they way to set a visible border on a groupbox is to use the StyleSheet property. I added:
border: 2px solid gray;
but there are a couple of problems.
1) Everything inside the groupbox also inherits this setting!
2) The border has a little hole/piece missing near the title.
Here is a picture of what I'm talking about:
Anyone know how to do this properly?
Thanks,
David
The first problem is simple enough When you add a stylesheet to a control it automatically propagates the style to all child widgets. However, you can restrict the use of the style sheet in a couple of ways. You can specify the type of control you want the style sheet to apply to. Example:
QGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This style sheet will only be set on Group boxes. However, if you put a second group box inside this one, the style will propagate to this one as well. Which may be good or bad.
Another way is to specifically the objectName of the widget you are applying the style to. Example:
QGroupBox#MyGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This will only apply the style to a group box with an object name of MyGroupBox.
As for the space, it is happening because the title is being drawn on top of your border. You can also add a section to your style sheet to change your groupbox title. This includes setting it's background to transparent, and to move the title around to your hearts content.
Example: This will set your title to the top left corner of the group box just inside your border, with no gap.
QGroupBox::title {
background-color: transparent;
subcontrol-position: top left; /* position at the top left*/
padding:2 13px;
}
this worked for me on Qt 5.1.
qApp->setStyleSheet("QGroupBox { border: 1px solid gray;}");
Elimeléc
Specify a selector for the group box style such as:
QGroupBox
{
border: 2px solid gray;
}
As for the gap, you can probably fix that by setting some padding. Check the docs here.