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.
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!
Right now i am making all of my elements with a percent width and height so that they can scale the same regardless of the device. As an example, whether someone is viewing an input element on a 720p or 4k monitor, it should fit the same across the browser.
Now my problem is that i am trying to make my elements scale upon an increase or decrease in zoom(browser zoom:ctrl and +/-) but because i am using a percentage width and height, the element doesn't scale. Well actually i think when i zoom in the input gets smaller, i'm not sure why that is. Other websites when you zoom in their input gets bigger in width and height. When you zoom out the element gets smaller.
What is the proper way to go about doing this? Obviously it can be done since every site i visit, including stackoverflows elements(search input as an example) looks the same size upon viewing and scales in height and width upon zooming.
What i've tried:
Using a fixed min-width and min-height but it's not exactly what i want. If the width/height percentage is higher than the fixed min-width/height then the element wont resize until the zoom % * the fixed min-width/height pixel count is greater. If the fixed min-width/height pixel count is higher than the width/height % set on the element, then the element will be the size of the fixed min-width/height and the element size wont look the same across all monitors.
using a fixed pixel for the width/height will make the element resize upon zooming but it wont look the same across all monitors.
Using a flexbox on the parent div "search" to make the child input "test" grow/shrink upon zooming. Doesn't seem to do anything.
NOTICE: don't try to zoom in without full viewing the code, otherwise it will make the input scale upon zooming as a result of stackoverflow's own code.
html, body {
width: 100%;
height: 100%;
margin:0px;
}
div#maincontainer {
height: 100%;
width:100%;
background-color: orange;
}
div#search {
position: relative;
top: 50%;
margin:auto;
height: 5%;
width: 35%;
}
input#test {
position: relative;
width: 100%;
height: 100%;
}
<div id="maincontainer">
<div id="search">
<input id="test" type="text" placeholder="TESTING" />
</div>
</div>
The browser zooming (using "Ctrl and +/-") actually changes the value that font-size: 100%; (which is equivalent to font-size: 1em;) corresponds to. That is why the text inside your input element is scaled when using this zooming feature. But because the input element size does not change (see explanation below), it looks like the latter gets smaller... whereas in fact it is its inner text that becomes bigger.
As far as I understand, the idea was to give a chance to the visitor to read text (while possibly breaking the page layout), if for some reason they have difficulties with the text size the website designer had chosen.
In the case of the size of your input element, because you define it relatively to the size of its containers (using percentages), up to the body which has 100% of the view port, you are not giving it any chance to be scaled by this feature, but instead you make it dependent on the view port size. So if you do resize your view port (i.e. browser window), you will see your element size changing, but not its inner text. It may sound as what you were looking for at the beginning (rendering with the exact same proportions on different devices, actually on different view port sizes), but what today's websites do is actually a totally different technique.
What they do is called "Responsive Design", i.e. the CSS uses "media queries" that can detect the type of device, screen size (actually view port size), etc. These media queries act as conditional blocks for CSS rules. The typical use case is to render a big menu on a side when the screen is wide enough, but only a menu button when the screen is narrow.
You can also notice that they do not actually render in the exact same proportions depending on the view port size (which was what you wanted to do by using only percentage-based sizes). Most of the time, there is an empty space (on both sides in the case of StackOverflow) that fills the gap, while the content has the same size in pixels, until the view port size changes so much that it triggers a media query, which then applies a different set of CSS rules, possibly changing completely the page layout.
Another good practice is to use as much as possible sizes (but not necessarily positioning) in em units, which refer to the current font size. That way, when the visitor uses the browser zooming feature, these sizes will scale accordingly, not only the text. For your case, you could have defined the height of your input element as 1.5em for example, so that it is always 50% bigger than its inner text.
Finally, I encourage you to use the DOM and Style inspectors of Development Tools featured by most browsers (turn the Development Tools on by hitting F12). They usually also provide element pickers, which allow you to pinpoint an element on the page for which you want to see the exact DOM and applied styling rules. It is a very instructive and ludic way to learn how others design their websites.
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.
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;
}
I am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/
Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.
If you zoom out once that's what the site SHOULD look like.
Any ideas guys?
Dan
You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.
It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)
If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)
Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.
Others have pointed out why this is happening. Here's some more points, though:
to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter
incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels
whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it