I have 3 questions related to viewport;
Do document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions of the element ?
Can we both get and set width for the html element ? If yes, can this be done both using CSS and JS ?
Is there a CSS exception to the rule that "document.documentElement.clientWidth and -Height still gives the dimensions of the viewport, and not of the element "
it should always return the dimension of the viewport regardless of styles applied to the html element.
you can't set it. As this would require the browser-window to resize too. You can resize the window using JS but you shouldn't do that. You can change the height and width of the html element with css, but that doesn't change the clientWidth.
if you want to get the actual width of the html element use document.documentElement.offsetWidth
mobile is a bit of a different story.
Related
I'm trying to set min and max dimensions for some elements on a webpage and for elements near the end of the screen, the tooltip is cut off. Usually I would just look at the computed height and width and guess what it could be rounded to, but the width and height are set to auto.
I can't change the size of the viewport, since the size of most of my elements is dependent on viewport width.
I could try to copy the text inside of the tooltip, but I don't know how to get it to stay frozen in place so that I can select the text.
I saw some answers saying to hold F8, but that only works if you have a tooltip applied to the element you're hovering over, it doesn't freeze the inspect tooltip.
An example of what I'm trying to describe.
Source: https://developer.chrome.com/blog/new-in-devtools-75/#A%20detailed%20tooltip.
I have TYPO3 10 and want to render the images in specific dimensions. I have a content element with only images, and these pictures are rendered with the dimension 495px x 331px. How can I change that? I've uploaded a much bigger original picture. The preview images are always in these dimensions. If I click on the image to enlarge it, it shows a much bigger picture.
The content element is a pictures only element with two columns.
When I set one column, the preview pictures are bigger. How is TYPO3 calculating the dimensions of the pictures?
I assume you want to know how to style the default content type "image".
This content type usually renders a gallery view (grid) of images.
First of all you have these options by default:
Selecting "Number of columns: 1" would make the image use a bigger space.
If you want to directly influence the HTML output, here are some pointers:
The default rendering engine of TYPO3 is fluid_styled_content.
Here is a guide how to override templates for a specific content type:
https://docs.typo3.org/c/typo3/cms-fluid-styled-content/10.4/en-us/Configuration/OverridingFluidTemplates/Index.html
That specific content type uses a GalleryProcessor:
https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Configuration/TypoScript/ContentElement/Image.typoscript
It renders this template:
https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Templates/Image.html
... which uses some partials to render the media.
Media/Gallery sets up the layout for the image grid:
https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Gallery.html
Media/Rendering/Image finally renders the image. The value of dimension has been calculated by the GalleryProcessor:
https://github.com/TYPO3/TYPO3.CMS/blob/10.4/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html
Material-ui Select adapts the select's width according to selected MenuItem's width. I would like to keep it as large as the largest possible menu item: It looks a bit unfinished when the form modifies its size. I couldn't find any reference to that in the doc.
I can fix the width in css, but it's not adaptative to option
edition.
I can use JS to multiply the number of characters of the menu item and multiply it by the maximum width of one letter and apply this width to the select.
Is there a simpler solution I didn't find?
Thanks
I need to render a TextArea in an exact pixel width for the special purposes of my GUI.
When I set its width to "250px", it comes out as 256px.
Is there a way to override this behavior so I can render it as 250px exactly?
When you use setWidth(), you're effectively setting the element's content width.
To get the offset width use UIObject#getOffsetWidth(). This will return the width including padding and border (but not margins).
References on W3C
Computing widths and margins
The box model
I want to set height of tiny mce depending on the type of element it is initialized for. For example, I want to set height 200px for headings and use mce's default size for for paragraph and ordered and unordered lists. Also, I want to adjust height of the mce instance with the content. Instead of adding vertical scrolls, it should increase with content.
Help APPRECIATED.
For this you need to specify editor_css in the tinimce init.
There you should change the desired values.