In jQuery, we can use innerHeight to get the height of one element (including padding but not border.).
$("selector").innerHeight();
How can I get the same value by dojo?
What my solution is using
dojo.contentBox() //get the height of content box
dojo.style(node, "borderTopWidth") //get width of border-top
dojo.style(node, "borderBottomWidth"). //get width of border-left
Is there any easy way to do it?
Unfortunately, I don't think there is an easier way to do it.
You basically have three choices:
dojo.contentBox(node) // excludes border, padding and margin
dojo.position(node) // includes border and padding; excludes margin
dojo.marginBox(node) // includes border, padding and margin
So, you need to do what you suggested. Use dojo.contentBox(), then separately calculate the top and bottom border widths.
Alternatively you might want to place a <div> inside a <div>, so that you can set the border on the outer div and keep the padding on the inner div. You would then be able to get the required height from calling dojo.position() for the inner div.
<div id="outer" style="border: solid #000 1px;">
<div id="inner" style="height: 20px; padding: 2px;">.</div>
</div>
<script>
alert(dojo.position("inner").h) // 24
</script>
Related
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
I Want to make my form items responsive when re-size application window like the websites but i can't do it.
I want to make it always in the center of the application window i was used "anchor" property but it doesn't do it.
there is any way to do this ??
You can centre a control on the form by using CSS. For example:
div.deskTop
{
width: 60%;
margin: 0 auto;
}
Then use the HTML:
<div class="deskTop">
... Define controls to be centred ...
</div>
The DIV containing the control will always be 60% the width of the current form size, and will be automatically centred when the form resizes.
I'm using bootstrap for design web for and have created controls inside div with class thumbnail but that controls going out of that div. Here is link to code
You can set the thumbnail height to Auto, also you can set the min-height for empty thumbnail divs, like this:
.thumbnail {
height:auto !important;
min-height: 100px;
}
Edit #1:
Try removing col-xs-6 col-md-6 classes and float your button to right ( also if you want add another button you can flaot it to left ), like this:
#btnsubmit{
float:right;
}
Updated Fiddle #2
Updated Fiddle #3 (using overflow:hidden;)
I have a container in the center of window. And my logo goes out from container to the left. I split my logo in 2 pieces. Right piece i added in my container with no-repeat. And left piece i have to add in my body background and somehow stick it to containers div.
i have drawn my issue:
how to manage that issue ?
I would do it somehow different. You can always set background of #logoimage div to your logo with gradient, or simply put an image inside. One image is enough with full logo object.
style:
#container{
display:block;
width:400px;
height:800px;
margin:auto;
background:#abc;
position:relative;
}
#logoimage{
display:block;
width:170px;
height:80px;
margin:auto;
background:#aaa;
position:absolute;
left:-70px;
top:30px;
}
html:
<div id="container"><div id="logoimage"></div></div>
live example here
What's the most important of this is:
position:relative style of container element
position:absolute style of logo element
The idea generally is that in position absolute, you can set x,y relatively to element with position relative.
Using JSSOR slider the function ScaleSlider() calls $ScaleWidth to resize the slider according to the viewport. This is achieved by applying a transform style to the #slider1_container element.
transform: scale(0.756364);
However, this also causes any text in the caption to be resized, rendering it illegible.
<div id="slider1_container">
<div u="slides">
<div u="caption" class="myCaption">
<p>Text goes here</p>
</div>
<img u="image" src="myImage.jpg" />
</div>
</div>
How can I prevent the caption text (.myCaption) to be affected by the transform style?
This was a very irritating issue, our designer kept complaining about the automatic resizing.
What i did to deal with this was:
1.Created a function to scale the div that holds my captions back to its original size. The div its originally hidden and after applying the transformation is shown. The original size of my slider is 1920 px width, so i am using that to calculate the percentage of the browser resizing in order to scale the captions back
function ScaleCaptions(){
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;
if(bodyWidth<992){widthChange=widthChange/1.5;}
$(".captionHolder").css("transform","scale("+widthChange+")");
$(".captionHolder").show();
}
I call this function for the following 3 events, after the ScaleSlider function is called:
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);
If you want to resize the captions at some point, css rules wont work, so you have to do it with jquery. In my case i wanted to resize the captions below 992px, so i added this line of code in my function
if(bodyWidth<992){widthChange=widthChange/1.5;}
i would disagree with the above approach, sorry for writing another answer but i could not comment. Even when adding css rules for well established breakpoints(768,992,1200, so on), the text continues to resize along the slider, with the difference of starting from the text size declared in the css rules. So for example if i wanted for 768px the font size to be 16px, although it would start from 16px at 768px, it would continue to resize along the slider, which is not what i want. Also 16px font size at 1200px resolution, and 16px font size at 768px resolution have a huge difference, with the second case the text being very tiny
I have similar automated function which works for my solution:
function ScaleSliderCaptions(id,obj){
//var parentWidth = jQuery('#'+id).parent().width();
var bodyWidth = document.body.clientWidth;
var widthChange=obj.$GetOriginalWidth()/bodyWidth;
if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}
obj - slider object created before,
id - slider_container
Caption should always scale along with slider. There is no option to stop caption from scaling.
Css trick below may meet your needs,
#media only screen and (max-width: 480px) {
.myCaption{
...;
font-size: 24px;
...;
}
}
#media only screen and (max-width: 768px) {
.myCaption{
...;
font-size: 16px;
...;
}
}
#media only screen and (min-width: 769px) {
.myCaption{
...;
font-size: 12px;
...;
}
}