In XAML, you can define a size property (such a length or width) in "*" units, in which * represents a part of the remaining space.
So, if I have a parent element that is 1000px wide, and it has 2 children, which are both defined as being 1* wide, they will be 500px each. If one is defined as 3*, and the other as 1*, then one will be 750px, the other 250px.
If there is a third element, and the widths of the 3 are defined as "100px", "" "2" respectively, then the widths of the 3 will be 100px, 300px, 600px.
Is there a CSS equivalent of this, or should I just simulate it using calc()?
Flexible box layout model does that with an OK support matrix (no IE)
It does exactly what you're after, e.g. for your scenario 3:
<div class="box">
<div>un</div><div>deux</div><div>trois</div>
</div>
.box {
width: 1000px;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ width:100px; }
.box > div:nth-child(2){ box-flex: 1; }
.box > div:nth-child(3){ box-flex: 2; }
Fiddle'd from html5rocks example
Although ratios aren't supported in CSS, percentages are. This means you can't really specify "the rest of the width", but you can normally get what you want.
For example, your first example of 1000px with 1* could be achieved by assigning `width: 50%'. Your second example would be 75% and 25%.
Your third example is a bit more complicated, mixing fixed px values and percentage values won't work. What you can do is use some clever margins to get the overall result.
I have created a JS Fiddle to illustrate the third example.
Related
I am using Ag-grid in order to display table, i am looking to make my table responsive.
So i am trying to fit the whole table/ whole columns to what ever the width of the screen is:
If the width of the screen is less than 500px only then i want to make the the x-axis scrollable, otherwise the entire table/ entire columns should fit the screen.
Here is the codesandbox:
https://codesandbox.io/s/priceless-khorana-bw55b
Initially the table was leaving space like this:
I also tried this in mounted:
mounted () {
this.gridApi = this.gridOptions.api.sizeColumnsToFit()
}
I get below image when i reduce the width of the screen and when i have used sizeColumnsToFit():
But the sizeColumnsToFit() works fine when the width of the screen is full.
I also referred the documentation of ag-grid, and found out the below link:
https://plnkr.co/edit/YG7be1X8kAgeSEas, this is what i am looking for, and i also tried the same as example but don't know why i could not make my table responsive like that.
So, please help me in making my table fit to what ever the width of the screen is. As the width keeps decreasing and if its less than 500px only then i want to make it scrollable. Then, i also want to reduce the space between columns, so it becomes easy to fit the table.
Use the grid event gridSizeChanged to call a function each time your grid size changes. In this function, call sizeColumnsToFit to auto size your columns if your grid size is more than 500px, else, resize each of the columns to a more reasonable width each, e.g. 300px;
onGridSizeChanged(params) {
if (params.clientWidth > 500) {
this.gridApi.sizeColumnsToFit();
} else {
this.columnDefs.forEach(x => {
x.width = 300;
});
this.gridApi.setColumnDefs(this.columnDefs);
}
},
Demo.
In order to reduce the space between the columns, use defaultColDef to remove the padding from the cells, and set the padding to 0 for the ag-header-cell class for the headers
Demo.
The Less percentage function returns value in (%) - wow!
element {
width: percentage(700 / 1400);
}
will compile to:
element {
width: 50%;
}
What would be the best way or syntax to get the value in (vw) so the style will compile to:
(bare in mind that the division function needs to be used. (700 / 1400))
element {
width: 50vw;
}
The best way to achieve the expected output would be to multiply the value by 100vw. This would be the most meaningful and easily understandable method.
a{
width: 700/1400 * 100vw;
}
The below method of using unit() function works too but I wouldn't really recommend it.
One of the primary reasons why I wouldn't recommend it is because I am not sure if that is supposed to work as it does. The unit() function is supposed to take a number as its first parameter and add the units to it but a percentage value is not exactly a number and this may not work in future versions depending on how the Less core team view it.
I read the docs and it seems like the first parameter can be a number with or without a dimension but I still wouldn't recommend it because the earlier method is far more easier to understand than the usage of functions.
b{
width: unit(percentage(700/1400), vw);
}
I have a label which has border around, it was set by this function:
this->setStyleSheet("border: 1px solid black");
but when I wanned to change position of the label I had to also give width and height of the border but where do I get it from?
In fact the parameters might be obtained via this->style(); that returns a pointer to QStyleSheetStyle... then via renderRule() one could get QRenderRule that stores all the structures required. The only problem is that those methods are private and intended for internal use.
So the simplest way is to use RegExp:
QRegExp regexp(".*border: *(\\d+)px.*");
if (regexp.indexIn(btn->styleSheet()) >= 0)
qDebug() << regexp.cap(1);
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is advantage of using LESS variables for changing properties like;
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
#Margin-110: 110px;
#Margin-189: 189px;
#Margin-115: 115px;
#Margin-150: 150px;
.................and so on.
And creating those variables which will not be alter in future.
#PullLeft: left;
#PullRight: right;
I am re-factoring the LESS in my application which has too many CSS properties which are using variables for above scenarios. Is there any advantage of using variables in this case?
I think we may have a hammer in the house with those variables. Having them named so specifically is problematic both because it doesn't really work with semantic concepts of layouts AND because if you were to change some of them, total chaos would soon ensue. Just imagine:
#margin-189: 27px;
#margin-115: 46px;
I had trouble typing that even as an example. I feel something like the shower scene from The Crying Game.
No, these variables are an example of when your only tool is a hammer, all you see are nails.
More correct might be something more semantically flavored, like:
#container-margin-left: 36px;
#panel-margin-left: 20px;
Those at least speak to how your site will be styled AND if the values were to change, it would not result in an immediate maintenance trainwreck.
Its highly discouraged to use the name of variable same as value. The purpose of using variables is that if there is a change required then modification is minimal. e.g you have declared a variable #Container-width: 100px and you are using it in 10 files. So if you want to change its value to 200px then you would simple have to change value nothing more.
There are two disadvantages of using variables names as you suggest:
If you want to change the variable #Margin-10 value to say 15 e.g #Margin-10: 15 it would look odd.
If you are declaring variables for each value then there is no benefit of declaring it as variable because you have to modify it on several places (which is not fulfilling the purpose of variables)
Now coming to the variable name #PullRight or #PullLeft. Again there is no benefit of using such names, as the values (left, right, top , bottom) are limited not variable. So I would suggest that you don't create variables but use values as it is.
Create variable names on the basis of their functionality. Use noun and verbs.
It's the same as using variables in any language. You can simply change them whenever you want.
Now you can think - they will never change, but in future you may want to make some changes. You may even move some CSS to another project where you decide to make some changes. Using variables you will do it it a minute.
Another example. Let's assume you have the following code in CSS:
#page {
width: 800px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
now you decide to change #page width to 780px
SO you change it:
#page {
width: 780px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
and now you have a problem - you need to look in the whole file what's wrong (in real file it won't be so easy as in example above).
Using variables you could have:
#page-width: 800px
#content-width: 600px;
#sidebar-width: #page-width - #content-width;
so without a problem you can change the value or make small modification in those 3 lines.
However in the example from question I think it hasn't been done as it should. If you define:
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
you expect that Margin-10 is 10 unit margin but you can decide to change the value for let's say 11 and you can have:
#Margin-10: 11px;
#Margin-12: 15px;
#Margin-19: 24px;
It will make you completely mess, because in fact even if you look at this file, you now don't know what is Margin-10 variable and what's its purpose. It has even other value than its name suggests so you don't really know what to expect and you again need to look at whole CSS source.
So variables are useful but they should have names that you can easily remember and know what's their purpose. You should never connect variable name with variable value because value can change and you will get useless name.
However it's also possible in above example that someone defined those margins even not to change their values but to change their units, for example for using em:
#Margin-10: 10em;
#Margin-12: 12em;
#Margin-19: 19em;
However I still think it's not the best solution because it's limiting re-usage this file
I have a variable that sets a percentage:
#var-a: 50%;
And another that is a fixed width:
#var-b: 100px;
I want to calculate #var-c as below:
#var-c: (#var-a * #var-b);
I expected 50px, but actually get 5000px. What am I doing wrong?
Less calculations use the numbers regardless of the units. If you know that #var-a will be in percentages, you could just do something like this:
#var-c: unit(#var-a / 100 * #var-b, px);
using unit() allows you to control the output unit.
You can also use guards in addition to do something else if #var-a isn't a percentage.