I'm trying to use the kendo.alert function instead of the normal javascript alert - but whenever I pass in a lot of text (e.g. lots of paragraphs with linefeeds) the alert box grows past the height of the current window, meaning you can only see the bottom part of the text plus the OK button. Is there a way to enable scrollbars on kendo.alert so you can see all lines?
You could use some CSS to force scrollbars:
.k-alert {
max-width: 50%;
}
.k-alert .k-content{
max-height: 100px;
overflow: auto;
}
DEMO
You could also use JavaScript to calculate available screen height and then set the content max-height accordingly.
Alternatively, use the full kendo dialog and set the maxHeight property:
https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog/configuration/maxheight
Related
I'm trying to reposition the PanPanel and ZoomPanel controls on my map to the bottom left corner rather than the top left. I see that I can add options, but as much as I've tried, I can't find a way to tell it to stay to the bottom left, even when the window is resized.
I am also not sure how I will tell them to stack like they do normally when I tell them to reposition relative to the bottom left.
I changed the images that make up both panels, so now there's a bit more room between pan and zoom panels than I want, so I'm also trying to get them to come closer to each other.
On top of looking into using options on the controls, I also tried creating a style for the id of the div that surrounds both panels, but the value of the id in the div is "OpenLayers.Map_2_OpenLayers_Container", which contains a '.'. Far as I know, that's not a legal id for styling. Anyway, it didn't work. On top of which I don't think I can trust the name to always be the same, with continued work on this page causing a lot of additions over time.
Any ideas?
Try:
new OpenLayers.Control.YourControlXXXX({
moveTo: function (px) {
if ((px != null) && (this.div != null)) {
this.div.style.left = yourLeft + "px";
this.div.style.bottom = (yourBottom+controlHeigth) + "px";
}
},
... other options
})
ummm! I see that these controls are more modern than I thought, are positioned by CSS so try:
.olControlPanPanel {
bottom: 55px; /* not 0px */
top: auto;
}
NOTE: try as: div.olControlPanPanel {... to force the priority of CSS if you are not sure where position are loaded de css of OL.
So I found the problem. First I wasn't setting top to auto. Since it was set in the style.css file to 10px, and when I changed it in the style.css file it to auto the bottom worked. But then my css file wasn't working. I found an OpenLayers example for Pan and Zoom, and eventually found that the difference between what I was doing and what they were doing was that I hadn't loaded the style.css file explicitly at the beginning of the page. So it seems that the OpenLayers Map, when it is created, causes the style.css file to be read late, after my css was read, and so it overrode my override. When I did an early load (beginning of the page) it worked perfectly.
Seems that the attribution control, created when I create a map Layer, must read the current CSS, since the map hasn't yet been created on the page, and so it never needed for me to do the early load. If I remove the early load, it still takes the changes made from my css file. But removing the early load causes the Pan and Zoom controls to no longer respond to my changes, so I assume this means that the Map object is reading the styling after the late load of the style.css file, which at that point has already overridden my css.
Go figure...
Just in case this might be of use to anyone else. I'm using OpenLayers 3 and I wanted to move the zoom controls to the righthand side of the map. My map is attached to an element with a 'tm-openlayers-map' class value and to move the zoom controls I used the following css/sass
.tm-openlayer-map
//change the colour of the map buttons
button {
background: $title-bar;
}
.ol-zoom {
top: 0.5em;
right: 0.5em;
left: auto;
//move the tooltips to the left of the now right aligned buttons
.ol-has-tooltip:hover [role=tooltip] {
left: -5.5em;
border-radius: 4px 0 0 4px;
}
.ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
left: -6.2em;
}
}
//make sure the rotate controls included by default with an opacity of 0 don't
//block clicks intended for the '+' button
.ol-rotate {
visibility: hidden;
}
}
I am allowing users to edit their profile icon,so that the users can adjust their icon to what part of the image to display.
I have a fixed <div> with width 50px and height 50px; .This size will be used when users are editing icon.The image will be larger and users can drag and set what to show.In coding part i had taken width,height,top,left.Top and left is used to determine what to show.Hope you understand that.
My problem arises when the edited icon is shown in the top bar. I had set the width of the div as 30px X 30px. When converting 50px size to 30px i had subtracted 20px from the obtained width so that it fits inside the 30px div as expected by the user.The actual part where what part of the image is to be displayed causes problems, the top and left obtained is for 50px div using the top and left for 30px div the expected part is not displayed as you can guess that.
I want to show the part that is selected by the user.Check this jsfiddle: http://jsfiddle.net/4mDQf/
How can i do that?
Thanks!
I had figured out a solution:
Cut the part to be displayed in 50px and shrink the cut image to 30px using php.
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
I have a div class set up with the following CSS style:
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
As it turns out, another CSS style was causing the issue:
body{
line-height: 1;
}
Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here
I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.
Just to put in evidence the #Kuba Orlik's solution (he posted as comment on the accepted answer) that's the only one that worked for me.
Add this on inside elements:
line-height: normal;
Note: Explicitly normal not 1 because it's different
I have encounter this problem.But I solved this use the following css style:
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
In my case, the problem was with the font. We use font-family: Galano Grotesque. Apparently, this font is rendered higher than the computed height.
<div>
<p>some text</p>
</div>
So even without max-height, when the inner p and the outer div were both computed as 20px height, there was still a scroll bar (with overflow: auto) because the font was about 1px higher than expected.
So the solution can be any one of:
Use a different font.
Add padding to the outer div. This way it will be large enough to cover the extra pixel that comes from the font. In my case, adding one pixel of padding to the bottom and one to the top solved the problem.
Set line-height to a bit larger value (in my case, from 1.25 to 1.4), so it won't interfere with the font.
Set line-height to normal because then the actual value will be influenced by the font. However, according to Mozilla, this is not the preferred way.
The reason for the vertical scroll is obvious: the scrolled content is higher than scrolling area. But when you observe their heights, they are equal!
The causes are multiple but all come down to a common one: an element inside the scrolled content overflows it and makes the result taller.
How to fix this?
find the guilty element by looking near the bottom edge of the scrolled element (or to the right if you're scrolling horizontally), because they are the most likely to overflow. You should observe a height larger that their parent's.
see what makes them overflow, be larger than their container. As other answers suggest, it can be line-height, some margin, etc. Change those properties to make them fit, or as an alternative, set overflow-y: hidden to their immediate parent.
I am working on a project showing client testimonials as markers on a google map.
Using server side clustering in SQL and returning a json of field for clusters or markers, which is all working nicely. Some of the testimonials contain richer content, such as image url or video url.
I am using a .JS file marker with labels to show a text banner under each marker showing the rating e.g. 5 out of 5, but where a customer has supplied us with an image, i need to display the image. The marker with label code uses CSS styles to set text or image. I am checking in my Jquery code for a photourl, and if one exists, supplying the right paramters to the marker, however, as the customers have provided these images, they are all of varying dimensions and resoution. The current code seems to sho the photo's actual size hanging off the marker, i tried adding max-width: 60px; max-height: 60px; width: auto; height: auto; but it had no effect. is there any way i can use CSS or jquery to reduce the display size of these images, whislt maintaining aspect ratio?
I have a feeling i am going to have to go through the existing stock, create amended files and update the database to point each record to its new path, which i would rather avoid if i can code around it instead. Once this project is working there will be a big push to get more customer data and i can influence the file saving of future images.
Essentially, I want some code to show an image as thumbnail with max dimensions of about the size of a normal icon on a windows desktop.
Incorrectly using {} not "...". Once, I changed it to:
style =
"max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
"
not style =
{
max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
}
It works as I wanted it to.