So I've run into this problem a lot but not until a recent project did it bug me immensely.
<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>
<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum
Basically, the situation goes: I have an element with an image or text that goes before another element which incorporates box shadow. The box shadow would then proceed to go over the first element, when I want the first element to be "in front of" (if that makes sense) the second element's shadow. How would I be able to do that? I tried z-index, but that didn't really seem to work?
z-index will work. Make sure to utilize positioning (absolute, relative, or fixed) on the elements.
Related
We are building the shapes for conveyors, Is there any way to create a rounded border for the images? The below images, which are png files, have square borders around the selected Images.
While Searching we found this code from the link
CSS Border on PNG image with transparent parts
img{
-webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}
Is there any way to add drop-shadow to the images in canvas?
Kindly help us with relevant codes and suggestions.
I did this by the properties shadow and strokeWidth(in css by adding shadow). So that image will be like this.
item.strokeWidth = 15;
item.shadow = new fabric.Shadow({color:'red',blur:15,affectStroke:true});
Present Output:
If someone has a better solution kindly brainstorm me.
i'm trying to find a solution for the following. When I drag a link between elements the label text inside the elements get selected for some reason.
Lets say I have an element A with the property A.attr("body/magnet", "active"); set and A.attr("label/text", "some text"); When I create a link from that element by clicking and dragging the label text gets selected on elements the link goes through.
This seems a little bit random though as sometimes all the labels in the graph gets selected when dragging the link.
Is there a way to make the label text not to be selectable?
We solved it by adding the following label style to the shapes.
let element = new joint.shapes.standard.Rectangle();
element.attr(
"label/style",
"-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"
);
From the answer above the links will still be selected, so you can put css on you #paper is or canvas like so
#paper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I'm trying to write a topbar for my application that should contain mainly the app logo (a small image) and the app title (just text). Moreover, I'd like this topbar to automatically resize according to the window's height.
I'm new to QML, but I suppose that I should wrap these components inside a Row or a RowLayout component. This is my sample code:
import QtQuick 2.0
import QtQuick.Layouts 1.0
Rectangle
{
id: mainwindow
width: 1024
height: 600
Row
{
id: rowlayout
height: logoimage.height
spacing: 5
property int count: 3
anchors
{
left: parent.left
right: parent.right
top: parent.top
}
Image
{
id: logoimage
source: "qrc:/images/resources/images/icon.png"
height: mainwindow.height / 20
anchors.top: parent.top
anchors.left: parent.left
}
Text
{
id: logotext
text: qsTr("This is my logo text")
font.pixelSize: parent.height
font.family: "Sans Serif"
height: parent.height
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.left: logoimage.right
}
/*
Rectangle
{
id: otherrect
height: parent.height
color: "lightgreen"
anchors.top: parent.top
anchors.left: logotext.right
anchors.right: parent.right
}
*/
}
}
I tell to the Row component that its height should follow the logo's height, and to the Image (logo) component that its height should be 1/20th of the Rectangle (mainwindow) component.
Using a Row container, the code behaves as expected but I get an annoying warning (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) and I have to do a lot of anchoring. Conversely, if I use a RowLayout container, I can remove most of the anchors but the Image completely ignores its height attribute (but the text still resizes correctly). So the questions are:
is this a bug of the RowLayout component? I'm using Qt-5.1.0-Beta with Android support, so this could be an explanation
how can I use a Row component without using anchors in its children and thus avoid the warning?
I'm missing something important or I'm almost on the right track but I have to bear with this beta of Qt until a stable version is released?
You said that you get the expected behavior with Row, so you should probably use it. The warning that Row is giving is asking you to remove the vertical anchors (top and bottom) from its child elements.
The Row element provides horizontal (left and right) anchor-like behavior for its child elements, but it doesn't mind if you use top and bottom anchors (notice that top and bottom were not in the warning).
In other words remove "anchors.left" and/or "anchors.right" lines from "logoimage", "logotext", and "otherrect" (if you plan on uncommenting it at some point), but not the "anchors.top" lines, and that should stop the warning and keep the correct behavior.
An alternative is to just remove the Row element and use Item or FocusScope (if you plan on having input elements in your "top bar" area), which will not try to take over anchoring operations, and that may be a better fit for you if you really like anchors.
You need to give a width to your layout if you want it to strecht its children, either with width: parent.width, or better, with anchors { left: parent.left; right: parent.right } and no anchors on vertical lines inside childrens of the layout.
1) NO, it is no a bug of RowLayout
2) Consider that RowLayout is preferred to Row because is most expressive for components placing. The Row component is better that Rowlayout only for graphics or animation apps
3) The stable version is now available, but your errors are not bugs ;)
I have a layout where I need to control the line height between wrapped non block level elements:
<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>
What I want to achieve is something like:
I don't want to rely on absolute positioning as there will be elements beneath which need to clear this and simply setting a low line-height on he paragraph results in an object which breaks out of its box, see the Fiddle below:
http://jsfiddle.net/mdHKy/2/
Any ideas?
You can first give the p a height then set its line-height to half that amount (being 2 lines).
p.payments {
line-height: 1em;
height:2em;
}
Then set the line-height of small to 1em and give that a vertical-align:
p.payments small {
line-height:1em;
vertical-align:top;
}
Then set the vertical-align of your .light:
p.payments small.light {
vertical-align:baseline;
}
JSFiddle example.
I am trying to figure out how "heights" are worked out when instancing a widget.
I am not going very far...
At the moment, I have a simple HTML page that goes like this:
</head>
<body class="claro"><div id="appContainer"></div></body>
</html>
The CSS is like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#appContainer {
height: 100%;
}
When my app starts, this happens (this is a simplification):
// Create the "application" object, and places them in the right spot.
appContainer = new BorderContainer( {} , 'appContainer');
Left as it is, the app has the right size and everything.
** Q1: why do I need to specify the height for html, body and #appContainer?
Then, I have:
// Create the new BookingDojo application
bookingDojo = new BookingDojo( { id: 'bookingDojo', region: 'center' } );
appContainer.addChild( bookingDojo );
and finally:
appContainer.startup();
BookingDojo has this CSS:
#bookingDojo {
height: 100%;
}
.bookingDojo {
height: 100%;
}
And uses this template:
templateString: '' +
'<div>' +
' <div class="bookingDojo" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: \'headline\'">' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: \'center\', tabPosition: \'left-h\'">' +
' <div data-dojo-type="hotplate.bd.Settings" data-dojo-props="title: \'Settings\'">Settings</div>' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title: \'attempt\', tabPosition: \'top\'" data-dojo-attach-point="settingsTab">' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'One\'">ONE</div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'Two\'">TWO</div>' +
' </div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Two\'">Section Two</div>' +
' <div data-dojo-type="hotplate.bd.Dashboard" data-dojo-props="title: \'Dashboard\'">Section One</div>' +
' </div>'+
' </div>' +
'</div>',
Note that
class="bookingDojo"
within the widget:
** Q2: If I take out wither #bookingDojo or .bookingDojo from the CSS, the app isn't rendered properly.
I mean, I also have a problem where I cannot get the Dashboard to render properly, because it comes out with height 0, but that's a different (probably related) story for which I have added a different post.
** Q3: Can somebody please explain to me the whole "heights of widgets" issue? I am aware that widgets need startup(), and I am aware that if you create an inner-widget and it's invisible, it will need a resize(). But that's obviously not all I need to know, since I find myself struggling over and over to get a widget to appear (and I go trying CSS, doLayout, resize, etc.) so... well, I must be missing something!
Thanks a million,
Merc.
For Q1, the documentation says :
The outer size must be specified on the BorderContainer node. Width must be specified for the sides and height for the top and bottom, respectively. No dimensions should be specified on the center; it will fill the remaining space.
In your CSS, you are setting the appContainer to take the full screen, because a height of 100% means 100% of the parent element... and your structure is
<html><body><div id="appContainer">...etc
Therefore, you have to set both body and html to 100% if you want your appContainer to take 100% of the screen height...
By default, block elements are already 100% wide, so no need to set the width there...
For Q2, I suggest you have a look at your html in firebug. You will notice a div with id="bookingDojo", which will be the outmost div of your template. The first inner div has a class="bookingDojo". Again, these 2 divs are nested, and for that reason, they both need to be set to a height of 100% if you want them to fill-in the full height of their parent container div (which is your BorderContainer, which you already set to be 100% high). I made a little example here http://jsfiddle.net/psoares/7JQWC/
You will see something like your bookingDojo where I set #bookingDojo to 100% height, but didn't specify a height for the .bookingDojo class. Try to set it and you will see the red border expand...
For Q3, well, I think the whole issue here is understanding how nested boxes get their sizes, so for that you can refer to Q1 and Q2...
I hope this helps...