I'm trying to achieve the following effect using CSS or CSS3 only:
The arrow in the diagram represents a picture. As the browser resizes, I want the picture to move to the left without touching the text and the picture does not resizes. So basically in this case, the arrow gets shorter as the browser resizes, so the remainder of the image is still there just hidden so that it can come back when I maximize the window again. Is this possible with CSS or CSS3 only?
[-------------------]
[ ]
[ text -----------> ] <--- Web Page
[ ]
[ ]
[ ]
[ ]
[-------------------]
[---------------]
[ ]
[ text -------> ] <--- Web Page
[ ]
[ ]
[ ]
[ ]
[---------------]
This is the best I could do:
http://jsfiddle.net/rmadhuram/czpnyn2x/
I could get the picture move left by positioning the background image, but the side effect is that the height of the right column had to be fixed.
.image {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/The_2010_Perseids_over_the_VLT.jpg/1920px-The_2010_Perseids_over_the_VLT.jpg');
background-position: right top;
height: 1280px;
}
I believe position: fixed might be what you are looking for ( jsfiddle).
Related
I want to display particles only inside or as part of 1 div. I did come across many different solutions but I can't seem to get any to work on my React app.
Here is a sample code that I created - https://codesandbox.io/s/particles-inside-1-div-9vhqgi?file=/src/Stars.js
Could someone please help me alter the styles to show the particles as part of the background in the middle div
I used the workaround which was to give a ref to a div parent from the canvas container, then refer to the canvas element in the DOM and set it's style to absolute
Working solution is in the codesandbox in the question.
// outer div ref -> element parent div -> canvas style
myRef.current.children[0].children[0].style.setProperty(
"position",
"absolute",
"important"
);
// stars-config.json
In your particle Json, under the color part, add the "fullScreen" and the "style" (The "zIndex":"-1" is optional)
"color": {
"value": "#fcf6f4"
},
"fullScreen": {
"enable": "false",
"zIndex": "-1"
},
"style": {
"position": "absolute",
"height" : "100%",
"top": "0",
"left":"0"
},
Im trying to send large descriptions inside a card using the google hangout api; but unfortunately the text is being trimmed when its too long.
Below is a sample of the card I send:
"cards": [{
"sections": [{
"widgets": [{
"keyValue": {
"topLabel": "Label",
"content": "Long Description goes here..."
}
}
]
}
]
}
]
When I look at the html received by the bot the content is in a dive with white-space: nowrap;...
I tried placing the content in a div and giving it white-space: wrap; as such
"content": "<div style='white-space: wrap;'>Long Description...</div>", but the bot just removes that div when it sends the card.
I also noticed that on pc browser the text was trimmed at 43 characters, so I used regex to add \n at every 43 character using .replace(/.{42}/g, '$&\n'), which kind of works but on mobile the card seems to trim messages even more...
Anyway I could simply remove that annoying white-space style??
EDIT
I know about this post, but it tries to increase width of the card (which technically would work for me), and there were no solutions...
It is possible to do it and very simple:
You only have to add contentMultiline: true to your KeyValue property.
"cards": [{
"sections": [{
"widgets": [{
"keyValue": {
"topLabel": "Label",
"content": "The working day is thus not a constant, but a variable quantity. One of its parts, certainly, is determined by the working-time required for the reproduction of the labour-power of the labourer himself. But its total amount varies with the duration of the surplus labour. The working day is, therefore, determinable, but is, per se, indeterminate.",
"contentMultiline": true,
}
},
]
}
]
}
]
Here you'll find the documentation of KeyValue fields:
https://developers.google.com/hangouts/chat/reference/rest/v1/cards#keyvalue
this:
to this:
Is there an API setting to achieve this?
Setting any style will turn the logo to white.
That is apparently a design feature from Google to have a more neutral logo aspect (probably in case you change the map colors, it won't "conflict" with your color scheme).
I am not aware of any documented way to specifically set the logo color, but according to this issue (read the 2 comments from the Google assignee) you will get a white logo if you set styles, even to default.
Apparently, just passing an empty styles array works:
var style = [{
"stylers": [{
}]
}];
I'm really unsure why, but adding this to the map's styles (and passed through defaultOptions) seems to make the logo white:
styles: [
{
featureType: 'poi',
elementType: 'labels.icon',
stylers: [
{
visibility: 'off'
}
]
}
]
When I resize the window all the columns become smaller. This is not the behavior I want since some columns are already sized as small as I want them to get from the beginning and I would like them to remain at their starting width while the larger columns shrink.
I tried using the columnResize event to prevent the columns from shrinking below a certain size, however it appears that this event is only for when a user manually resizes a column and it doesn't get fired when the window is resized.
How can I prevent columns from shrinking below a certain size when the window is resized?
(I am using the javascript version of the grid.)
In column definition columns in Grid configuration you can set attribute width. This force size of this column and prevent auto resizing during window resize.
If you don't set this option, column would dynamically fit into space.
{
field: "ColumnName",
title: "Column",
width: 120
}
Please find the solutions below
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
resizable: true,
columnResize: function(e) {
$("#grid colgroup col").each(function () {
if ($(this).width() < 50) {
$(this).css("width", "50px");
}
})
}
});
</script>
Please find the Fiddle for a working demo
Another way of it doing it is mentioned here
I have a div with a DOJO table. I want to display the div in full screen. I have tried using HTML5 API but the height and width are not enlarged in full screen mode. What are the other ways I can achieve a full screen with only the div containing DOJO table with it?? This is the table I have.
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [
{
name : "Date & Time",
classes : "title",
field : "date",
width : "140px"
}, {
name : 'Status',
classes : "title",
field : "statusMessage",
fields : [ 'statusMessage', 'statusMessageColor' ],
formatter : formatLink1,
width : "140px"
}];