I'm trying to figure out how to fit a <table> into a Susy grid. Meaning a <td> or a <th> should be as wide as a Susy grid column or a number of Susy grid columns.
My idea is to set the <col> elements to the width returned by Susy's space() function. Like:
(HTML)
<colgroup>
<col class="one">
<col class="two">
<col class="three">
<col class="four">
</colgroup>
and:
(SCSS)
table {
#include span-columns($total-columns omega);
colgroup {
#include reset-columns;
col {
span: 1;
&.one {
width: space(1);
}
&.two {
width: space(4);
}
&.three {
width: space(4);
}
&.four {
width: space(6);
}
}
}
}
Well, it doesn't work ;)
Has anybody built such a table? I would be glad if you let me know!
ps: I'm going to try to set up a jsfiddle
I found out why this isn't working: the #include span-columns($total-columns omega); statement makes the table display: inline. Setting it back to display: table results in the desired behavior.
But I'm wondering, if I just use width: 100% instead of using the #include for my table...
Related
I am trying to set my div width from a computed value, but I don't know how to archive it.
Case: I have some products which the informations comes from an API, and the length value changes depending on the product I selected, for this reason this component should be Dynamic.
The customer wants somethins like this:
That means, the lenght value should be also my div/span width, when the value is 10, should be 10% green, 29, 29% green etc.
Here's my code:
<li>
<span class="detail-name">foo</span>
<div class="progress" :style="getDataClass" ></div>
<span class="bold-value">{{something}}</span>
</li>
"getDataClass" is a computed value which comes from Store
First, I filter the data:
getData () {
return this.product.find(meta => meta.key === 'length_value').value
},
this function gives me the value '63'. Afther it I add this value to use with Style:
getDataClass() {
return {width: this.getData + '%'}
},
This gives me the value { "width": "63%" }
And this is my SASS (Bulma)
.progress
position: relative
flex: 1
margin: 0 8px
height: 10px
background-color: $color-grey
&::before
content: ''
position: absolute
width: 100%
height: 100%
background-color: $color-green
Can someone please help me ?
I saw it already working on my Vue course, but I am missing something or it does not aplly for this case
I hope I could explain it correctly, thank you very much for your help.
Is getData a method or a computed value?
If it is a method, the following might help:
getDataClass() {
console.log("C:",{width: this.getData() + '%'});
console.log("C:",{width: this.getData + '%'});
return {width: this.getData() + '%'}
}
Since I am new to Vue and JS. I have some difficulties to making dynamic progress bar. This bar is kind of indication of how many quiz already take. according to he photo below.
Below is my CSS and HTML of creating bar.
.progressbar {
width: 100%;
height: 5px;
background-color: #eee;
margin: 1em auto;
transition: width 500ms;
}
HTML
<div class="progressbar">
<div class="progressbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="{width: progress + '%'}">
{{ progress }}
</div>
</div>
how can I make it increase?
Place progress into the data and its working for me:
data() {
return {
progress: 70,
}
}
If you don't know how to calculate the progress just do it like so:
methods: {
updateProgres() {
this.progress=completedSteps/totalSteps*100
}
}
How do I set max width for a TextField? By default, the width is set to maximum size
You can set the max-width property of the component by implementing your own styles function as done in this Codepen example.
const getStyles = () => {
return {
root: {
maxWidth: '100px'
}
}
};
<TextField
id='myTextField'
spellcheck={ false }
name='bar'
placeholder='Placeholder text'
defaultValue='Default text'
styles={ getStyles }
/>
More documentation about this approach can be found at https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styles-prop.
You can add style attribute to a <TextField> component:
<TextField
...
style={{maxWidth: '100px'}}
/>
I hope it will help you.
Try to use max-width to set the maximum width the container should have.
.text-field{
width: 100%;
max-width: 500px;
height: 50px;
border: 2px solid black;
}
<div class="text-field">
<p>example<p>
<div>
I just started learning Vue and I was wondering, why should I use v-bind for style and not write it regularly in html/css file
Let's say you need to create a progress bar that is not static. You will then need to update the style attribute width for-example.
To accomplish this, we need to programatically edit the width of the element. We 'cannot' to this in plain css, therefore the :style attribute comes in handy.
Let's create an example:
Codepen
HTML
<div id="vue">
<div class="progress-bar">
<div :style="{'width':progress + '%'}" class="progress" />
</div>
<button #click="fakeProgress">Init fake progress</button>
</div>
Css;
.progress-bar, .progress {
border-radius: 20px;
height: 20px;
}
.progress-bar {
width: 250px;
background-color: gray;
}
.progress {
background-color: blue;
width: 0;
transition: all 1s ease;
}
Javascript
new Vue({
el: '#vue',
data: {
progress: 0
},
methods: {
fakeProgress() {
let progress = setInterval(() => {
if(this.progress == 100) {
clearInterval(progress)
} else {
this.progress += 1;
}
}, 50)
}
}
})
As you see here, we bind the progress data attribute to the width value on the fake progress bar. This is just a simple example, but I hope this makes you see its potential. (You could achieve this same effect using the <progress> tag, but that would ruin the explanation.
EDIT; Also want to point out that you are supposed to write all your css as normal as you point out in your question. However, :style is used in cases that you cannot normally use css for. Like the example above where we need css to change from a variable.
Is it possible to obtain the position: sticky effect on an HTML table build up using just divs and css?
Apparently if I try to add the position: sticky rule to the header, which already contains the display: table-header-group rule, the sticky effects is null.
HTML
<div class="container">
<div class="header-row">
<div class="header>Header</div>
[...]
</div>
<div class="body-row">
<div class="body>Content</div>
[...]
</div>
</div>
CSS
.container {
display: table;
}
.header-row {
display: table-header-group;
position: sticky;
top: 0;
}
.body-row {
display: table-row;
}
.body, .header {
display: table-cell;
}
Live fiddle: https://jsfiddle.net/Lc0rE/9fxobxb0/1/
This question may be a few years old, but I came across the same issue. Especially now that position: sticky is a widely adopted positioning element now.
I got round this by adding a float to the Table header & Table Rows.
.header-row {
display: table-header-group;
position: sticky;
top: 0;
float: left;
}
.body-row {
display: table-row;
float: left;
}
https://jsfiddle.net/58zes8rr/
There may be a cleaner option for this using Flexbox (Arguably not widely supported yet).
I first tried the answer above and added float to my css definition however this blew away all my dynamic column widths and required i specify fixed widths for all columns. Not an option.
As with everyone else, my first instinct was to put sticky on the Row itself but that did not work. It worked PERFECTLY when i added sticky to each cell in the header row.
Fiddle Example
(TLDR)
ON EACH CELL OF YOUR HEADER ROW:
.td.searchResultHeader {
position:sticky;
top:0;
}