I have created a custom css tooltip, however the tooltip width is very narrow (only 1-2 words per line).
Fiddle example of the problem
I would like the tooltip size to be dynamically generated, as I will be using it in a few places with different lengths of text (the text may also change at a later date). Another reason I need it to be dynamic is that it needs to allow for browser resizing and mobile view.
I have done a bit of research and played around with (not limited to) the following properties:
width: auto; /*doesn't change anything*/
max-width: ;/*max and min not useful as I want it to be dynamic*/
min-width: ;
white-space: normal; /*neither change anything*/
text-wrap: normal;
None of the above seem to give me a solution.
I can't use bootstrap in this project, but I am able to add JavaScript if that offers a possible solution.
Thanks in advance for any help.
The solution was to change position: absolute; to position: relative. This, however, messed up some other dependent styling which would need to be fixed.
Reasoning: Absolute requires a width to be set whereas relative can be dynamic.
Related
I'm trying to make available zooming on scroll. I have one #mainDiv with multiple .foo tables inside with jsPlumb endpoints. When the user scrolls, #mainDiv should remain the same size and tables should resize, which actually happens, but table's endpoints don't change their size and place. take a look at this jsFiddle:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/
Fiddle is pretty big, but we only need the first javascript function. Drag few items to the right side, add new link and scroll. tables will change size, but endpoints remain the same. How can I fix this problem with endpoints?
Endpoints are not part of these tables, but they are part of jsPlumb library, which has setZoom() function for it's objects. This function does not work and I would like to know why. Connectors should also change their place.
Also, app must be working on touch devices as well. Does setZoom work on pinch zoom for touch devices and how can I implement this?
Update:
So based on the question, we can just use the below CSS to either start the scaling from the left or the right depending on the elements position within the parent container.
A CSS change is needed in the parent container, as shown below
#mainDiv {
display: inline-block;
width: 82%;
min-height: 100%;
box-sizing: border-box;
float: left;
position:relative;
margin: 0;
padding: 3px;
}
Please checkout the JSFiddle for the solution!
JSFiddle Demo
Old Answer:
I am assuming that the zoom happening at the center is the problem, since we zoom from the middle the table always exceeds the container boundary. I would suggest adding the below CSS class, so that the endpoints are preserved.
.elementTable{
transform-origin: 0% 0%;
}
Please find below a working JSFiddle with the implementation.
JSFiddle Demo
My assumption may be wrong, please explain what its missing and I'll try to solve it!
I have an example of the layout I am going for in this jsfiddle.
If you run that fiddle and click the Leaflet button, everything works great (works great with google too, but I cant post my api key).
If you click Cesium, it does not seem to respect the flexbox space allotted to it. Any idea how to get Cesium to behave?
Note, you may have to resize your browser a bit to show the problem
This is because of some strangeness with flexbox attempting to preserve the canvas' aspect ratio (needlessly, in the case of Cesium, because it will just rerender on the next frame).
Here's a workaround. Edit the top of your jsFiddle CSS to look like this:
html {
height: 100%;
}
#cesiumContainer, .leaflet-container {
position: absolute;
width: 100%;
height: 100%;
}
Then, add one new rule to your existing .app .data .map block:
.app .data .map {
/* keep existing rules here */
position: relative;
}
Here's the modified jsFiddle.
This sets up a parent/child relationship, where the parent flexbox element has gained a position: relative, which means that any "absolute" children of it will be absolutely positioned within its coordinates (making them effectively relative to it). The child in this case is #cesiumContainer, which we have now positioned absolutely, not so much to gain the absolute nature of the coordinate system, merely to gain the side effect that the sizes of absolutely-positioned elements don't contribute to the document flow around them. This means that Cesium's canvas element can't push flexbox around, it must conform to it exactly, which is what we want.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
building a mobile site using bootstrap 3 which makes use of the collapse js plugin.
My issue is that when you hover over the font in the collapse (it's worth noting that this happens with system fonts and is not just a web-font issue, it's just easier to show with a webfont) or click the font it changes in appearance. Parts of the font are removed or the size changes. I'm not sure why this is happening and I've tried the following:
-webkit-font-smoothing
text-rendering
adding a fixed line height
backface-visiblity
However, none of those work. I'm running out of ideas and while it's harder to show in a screenshot it is 100% a big and noticeable issue when interacting with the site.
I'm assuming it's something to do with the collapse jquery but I can't find anything in the bootstrap repo, on here or from a general google search (hard thing to search for haha) so any help would be appreciated. I don't have much code related to the fonts but:
.panel-tap {
position: relative;
display: block;
width: 100%;
line-height: 1;
font-size: 16px;
}
The panel has some padding but this isn't altered during the animation, nor are any styles added during the animation (only class names are added to display/hide the content below.
I can't post a link to the site but hopefully this is enough info.
Thanks
edit: Worth noting that I've tried removing all styles associated with it (i.e position) and tried adding specific styles to make sure it isn't being overridden across the site (i.e adding font-weights, line-heights, borders etc)
edit2: This doesn't happen all the time, it stops after a few seconds or a few clicks, it's totally inconsistent
edit3: Disabled the animation/jquery side of collapse and it still does it
Some Ideas:
Have you tried setting all the CSS annimation properties to 0/none. It might be picking something up from a parent/bad selector elsewhere.
Double checked there is no CSS for :active or :focus. Or maybe a span around the text that has a relative font-size ( em, % etc)
I remember having trouble with something similar and position:relative;. Can you wrap a span around the text and give it position:static;
Is there an active class or something that might be causing the issue?
Thats all I can think of at the mo. But might help.
I am working on Html and Css. I am trying to design a chart conversation like web page where i need to show the messages alternatively like one comes right another on left similar in mobile applications. For that i am using divs to contains the message and i set a background-image for it,
Here what the problem i am facing is, message are of variable size that means some may occupy 1 line and some other might 5 to 20 lines we cannot estimate it. Div background-image size is 40px height only so if i got more than 3 lines of message then it crosses the background image. Here is my Div markup
<div style="background-image:url('some url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here is my content it is variable in size</div>
I have used the css properties like overflow:hidden but it didn't help me. Is there any way so that image or div will be automatically resized based on the content size vertically. Or other way i can follow that is closely related to my requirement. Please guide me.
You could make use of the CSS property background-size but it won't be supported in old browsers (mainly IE<9 which might not be a problem):
background-size: cover;
Or
background-size: 100% 100%; /*x and y*/
Or you can try to use jQuery to deal with it.
I would recommend you to take a look at: Perfect Full Page Background Image
Anyway, the image will get distorted and might not look very good. What usually is done in these cases is splitting the image in 3. Top, middel and bottom,so the middle image can be repeated on the Y axis.
But, you will still having problems with the graduated background, which you might want to use as another background image or rather with CSS3...
My advice: less is more. Make things easier. Take a look around in other sites and see how they try to avoid complex images. If possible, deal only with CSS, avoid requests, speed up your site and bring the new minimalist style to your site.
Here is a possible solution:
Just split it up into 3 divs.
see here
It works with splitting the image into three parts:
- Top
- Middle
- Bottom
But you should really consider building chat bubbles by using only HTML and CSS as it improves performance and lessens network requests.
You can use "background-size":
background-size: cover;
Read more:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Yet I don't recommend this. You better split your image to two image and use two div.
You may use jquery dotdotdot plugin and shrink the content of a div to a specific height and width so that it appears nicer..
You have an option to show the remaining content with a link at the end of your content allocated for the div and show the left over content may be in a popup or something you may want..
Browser support isn't as good as background-size (to my knowledge), but this seems like a case for border-image.
The image you're already using as background should split fairly well and this will let the div scale without causing the left and right edges of the speech bubble to stretch in the same way they would if the background image is just stretched to fit.
More info: http://css-tricks.com/understanding-border-image/
background-size: 100;
or
background-size: cover;
are the CSS solutions. If this does not fit your needs, then you can use jQuery's getWidth, getHeight, setWidth and setHeight functions.
Here's a working fiddle using background-size: 100% 100%;
By adding a couple of <br>'s after your message, you can compensate for the pointer to the bubble in your image.
You have loads of sites with chat bubbles made only with CSS.
Here are some examples:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://www.sitepoint.com/pure-css3-speech-bubbles/
http://www.ilikepixels.co.uk/drop/bubbler/
http://html-generator.weebly.com/css-speech-bubble-generator.html
If you have any doubt after viewing those, please ask us about it :)
Friend,
Try add this property in the element:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Because you set 100% of width but add to paddings and margins.
See if this working...