I want to set the left margin of a div by the position of the slider from the side-by-side plug in. It looks to be possible as the dividermove event built into the plug-in, but I haven't been able to figure out a method to feed that into the CSS for my div.
In the jsfiddle below, I basically want to dynamically set the left margin #year05 and #year15 using dividermove. I tried setting the #year05 class to inherit left from leaflet-sbs-divider but couldn't get it to work and I imagine is not the proper way to do it.
https://jsfiddle.net/x8r0pvg1/45/
If I understand correctly, you just want to position some text that follows the slider of Leaflet Side-by-Side plugin.
In that case, instead of trying to re-position your text / div on "dividermove" event, a very simple solution would be to append your div into the slider / divider itself, so that when the plugin adjusts the position of the latter, your div follows along automatically:
var yearsEl = document.getElementById('years'); // your div
document.querySelector('.leaflet-sbs-divider').appendChild(yearsEl);
Then you can center your div on the divider with your method of choice, e.g. using CSS:
#years {
width: 200px;
transform: translateX(-50%);
text-align: center;
}
Updated JSFiddle: https://jsfiddle.net/x8r0pvg1/47/
Related
I have a full screen map with a sibling div that appears "above" the map. The div is a full width 3 column flex, the left and right columns contain information panels (green in the diagram), the centre one is empty (pink in the diagram):
As far as the user is concerned, the pink column doesn't exist.
The problem I'm facing is that the center column is blocking drag events on the map, moving the mouse over it changes the pointer from a drag handle to a pointer.
It seems the standard solution for this is to add
pointer-events: none;
to the blocking div. I've tried this and it seems to make no difference, so I'm wondering if there's some Leaflet specific knowledge I'm lacking in regard to this.
Anyone got any ideas? Any suggestions welcome! :)
May be you can giving the center column a class.
for example:
class "center-column"
and put some css rule, like this:
.center-column {
position: relative;
z-index: -10;
}
Turns out it was due to a mistake I made. Since my map was full screen, I've given it's container the following styles:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -5000;
It looks like reducing the z-index of the map to be underneath the panels was the wrong way to do it. Removing the z-index: -5000, and increasing the z-index of the panels resulted in the same display, but without the problem!
I have a standard cell editor and when I am in edit mode the width and the height of the cell editor is not the full width and height of the cell.
Should I overwrite the styles or is there any flag in the configuration to turn off this effect?
I had this same problem. If you look at the DOM, you'll see ag-grid adds a wrapper div around all custom editors, and it's actually that div that is the problem. I solved it by adding this to my global CSS:
.ag-react-container {
/*
* This class is used on divs automatically inserted by AgGrid around custom cell editors.
* Without this, I don't know of another way of ensuring that the underlying <input> can take
* up 100% of the height of the parent cell, if it so chooses to.
*/
height: 100%;
}
I think a better way to achieve this is to only modify the inline style editor css:
.ag-theme-balham .ag-cell.ag-cell-inline-editing{
height: 100%;
}
I am using d3 chart to plot some charts.
I am looking for something by which I can flip my axis on a click of a button. Having said that I mean, I am looking for the functionality which seamlessly works for all type of charts like bar, line, stack etc.
Has anyone done some awesome work like this? Please help
Here is the sample
http://jsfiddle.net/adityasethi2601/ae5BP/
If you arrange your chart carefully, you should be able to achieve the flip with SVG Transforms to rotate your image, translate it if necessary to new margins, and then reverse-rotate any text that you still want to be horizontal.
As a quick-and-dirty example, I've adapted your fiddle so that when the button is clicked, a class gets toggled on the SVG as a whole, which triggers a CSS rotate transform on the entire image.
Javascript:
d3.select("div#chart > svg") ///select the svg
.classed("rotate", function(){
return !d3.select(this).classed("rotate");
//check whether it is currently rotated
//and set it to the opposite
});
CSS:
svg.rotate{
/* rotate the entire image */
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
http://jsfiddle.net/ae5BP/6/
However, note that CSS transforms (which apply to html objects, such as the entire SVG when embedded in a webpage) are not directly equivalent to SVG transforms, so I wasn't able to get the "reverse-rotate" on text elements working. To use SVG transforms, you'll need to wrap your entire chart in a <g> element to which you can apply the rotation. You'll also need to figure out the appropriate "center of rotation" coordinate, otherwise things will be rotated around your (0,0) origin point.
But this should give you an idea of where to start.
P.S. I also adapted the fiddle to make proper use of JSFiddle formatting and the external resources option for loading D3 -- use this format in the future.
You could also draw two versions of your chart (vertical & horizontal bar versions), and achieve a similar affect by having the "Flip Axis" button toggle visibility between the two.
I would like to know the correct and generally accepted way of adding a top and bottom margin to a GtkTextView that is inside of a GtkScrolledWindow. There are functions to set the left and right margin, which I am using:
gtk_text_view_set_left_margin(GTK_TEXT_VIEW(editor_text_view), 2);
gtk_text_view_set_right_margin(GTK_TEXT_VIEW(editor_text_view), 2);
But I can't seem to find any documentation on top and bottom. I've tried changing the border width of the GtkTextView with gtk_container_set_border_width but the border is not painted with the background color of the GtkTextView.
Basically - what I have is on the left and what I want is on the right.
You should use CSS for this things in GTK+ 3:
http://developer.gnome.org/gtk3/3.3/GtkCssProvider.html
Maybe you can use the view class:
.view {
padding: 3px;
}
Or only apply the style to the GtkTextView:
GtkTextView {
padding: 3px;
}
I'm using Ubuntu Natty with gtk+-3.2.3. and those CSS properties don't have any affect for some reason.
But you can use:
gtk_text_view_set_border_window_size( )
Along with: GTK_TEXT_WINDOW_TOP and GTK_TEXT_WINDOW_BOTTOM
And the border color will match the background of the GtkTextView.
http://developer.gnome.org/gtk3/3.4/GtkTextView.html#gtk-text-view-set-border-window-size
I just had to solve similar issue and I nested the text view in GtkAlignment - that gave me an option to set padding for all sides.
I'd like to create a text input with a clear button in a confined space. Like the iPhone, I want to place the button (a small x image) 'inside' the input at the far right so that a user can just click that to clear the value, instead of having to waste space beside the input.
Right now I'm using a background image on the input and an invisible span hovering over top. This accomplishes what I want, but there are problems: if the user types too much text just goes over the image, and IE doesn't seem to support elements above images. To solve the first problem I tried setting the margin of the input on the right, but that shrank the entire thing as opposed to keeping the input the same size and limiting the text to an area.
Do you know of any way I can create this compact input and clear button combo and have it look and function the same across all modern browsers?
Thanks!
If you want button on top of text:
<span><input><button>X</button></span>
span {display:inline-block; position:relative;}
button {position:absolute; right:0; top:0;}
If you want button not to interfere with the text:
span {border:2px inset gray; background:white; color:black;}
input {border:0; color:inherit; background:transparent;}
You could make a text input with right-marging: 0; and then put the image right next to it (inline), in a div/span with a background simulating a input extension. This way the input scrolls right before reaching the image, and you still get the image-in-input effect you desire.
I'm not testing this, but it would be something like this:
<input /><span><img /><span/>
input{margin-right: 0; border: 1px solid black; border-right: 0; background-color: white; color: black;}
span{background-image: url('xxx.png');width:20px;}
img{margin-left:0;border:1px solid black;border-left: 0;}
You could even extend the input without a background-image, just using plain css.