I have a like a spreadsheet of data (rows and columns), and I am converting to web components. It makes sense to make each column a web component. However some of the fields may require more vertical space than others. I could set a max height and scroll within the box, but I would prefer for the "row", i.e. the nth cell of each column, to be the same height. How would you make it such that it always appears as a grid?
In the example below "cell" A2 and B2 do not align vertically because they are independant. How does one insert webcomponents into a <table> or a display: grid element when the web component needs span multiple rows, but keep the rows aligned?
class Component extends HTMLElement {
constructor() {
super().attachShadow({mode:'open'});
const template = document.getElementById("TEMPLATE");
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
if (this.initialised) return; // Prevent initialising twice is item is moved
setTimeout(() => {
this.initialised = true;
this.init();
});
}
get(id) {
return this.shadowRoot.getElementById(id);
}
init(required = true) {
const prev = this.previousElementSibling;
let props = JSON.parse(prev.textContent);
this.props = props;
}
set props(value) {
this.get('TEXTAREA1').textContent = value.textarea1;
this.get('TEXTAREA2').textContent = value.textarea2;
}
}
window.customElements.define('wc-column', Component);
#CONTAINER {
display: flex;
flex-direction: row;
}
<template id="TEMPLATE">
<style>
:host {
display: block;
border: 1px solid lime;
}
#TEXTAREA1, #TEXTAREA2 {
border: 1px solid red;
display: block;
}
</style>
<div id="TEXTAREA1"></div>
<div id="TEXTAREA2"></div>
</template>
<div id="CONTAINER">
<script type="application/json">
{
"textarea1": "Cell A1",
"textarea2": "Cell A2"
}
</script>
<wc-column></wc-column>
<script type="application/json">
{
"textarea1": "Cell B1 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum",
"textarea2": "Cell B2 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum"
}
</script>
<wc-column></wc-column>
</div>
Related
In the example below place the cursor anywhere in the middle of two lines, eg. from 'ipsum' to the following 'lorem'. The following words will be selected: ipsum dolor sit lorem
On clicking the button I need to get the full lines in the selection. In the above example I should retrieve the following words:
lorem ipsum dolor sit lorem ipsum
Does anyone know how I can do this?
$('button').on('click', function() {
var sel = window.getSelection();
sel.modify('move', 'backward', 'paragraphboundary');
sel.modify('extend', 'right', 'paragraphboundary');
});
div {
white-space: pre-wrap;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>lorem ipsum
dolor sit
lorem ipsum
lorem ipsum
dolor sit
lorem ipsum
</div>
<br>
<button>CLICK</button>
I have tool tip attribute in my table, I want to set width to this attribute related to my column width, so I have different size tool tips. I have different column widths and I want to set width to the tool tip based on my column width, I mean how can I access data-md-tooptip attribute (tool tip element) through JavaScript and ad style like document.querySelector([data-md-tooltip]).style.width = "000px"
[data-md-tooltip] {
position: relative;
}
[data-md-tooltip]:before {
content: attr(data-md-tooltip);
position: absolute;
/*width: 360px;*/
top: 95%;
left: 50%;
padding: 8px;
transform: translateX(-50%) scale(0);
transition: transform 0.2s ease-in-out;
transform-origin: top;
background: #232F34;
color: white;
border-radius: 2px;
font-size: 12px;
font-family: Roboto, sans-serif;
font-weight: 400;
z-index: 2;
}
[data-md-tooltip]:hover:before {
transform: translateX(-50%) scale(1);
}
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</td>
<hr>
<!-- Here I want different tool tip width -->
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,L
</div>
</td>
document.querySelector requires a String as a parameter so you need to write
document.querySelector('[data-md-tooltip]').style.width = ...
But this method will return only the first element matched by that selector: if you need to apply the style to more than one [data-md-tooltip] element you need to use document.querySelectorAll and walk over the node collection you retrieve (e.g. using the spread ... operator)
[...document.querySelectorAll('[data-md-tooltip]')].forEach((tt) => {
tt.width = ...
})
I want to show a border effect when I'll scroll down and reach on the desired section.And it'll be hide when I'll leave that section. Is this possible using jquery?
Using $(document).on('scroll'), like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
html,body {
height:101%;
}
#box-1 {
width:200px;
height:200px;
background-color:#333;
}
.border-1 {
border: 10px solid #696969;
}
</style>
<body>
<h1 id="myTarget">This is the desire section</h1>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<div id="box-1"></div>
<script>
$(document).on('scroll', function() {
var pos = $(this).scrollTop();
if( pos >= $('#myTarget').offset().top){
$("#box-1").addClass("border-1").show();
} else {
$("#box-1").removeClass("border-1").hide();
}
})
</script>
</body>
</html>
Im trying to make text flowing around the image, in a different scenario. the image wont be inside the content. Image would be a seperate component and the div with text will be a seperate component. So markup will look like this
<img class="imgtofloat" src="images/1.png" alt="" />
<div class="divwithcontent">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
The scenario is that we cant change the markup but we need to position the image between the content and make the content float around it.
EDIT 1:
I need the image to be in the center of the content as it is in this image https://www.flickr.com/photos/41695354#N08/14477076543/
We can stretch our CSS imagination. Hide the image and replace it with background.
Example, possibly adaptable.
Have a fiddle!
CSS
img {
display: none;
}
p:first-child:after {
content: "";
display: block;
float: left;
width: 100px;
height: 100px;
background: url(http://www.placehold.it/100) no-repeat;
margin: 20px;
}
If you can Change the image placement.
step 1) put image in between the paragraph text.
step 2) and one attribute in img tag align="left"
You can also use inline style, if you just have a few CSS rules.
<img src="images/1.png" alt="" style="float: left" />
I’m using jquery plugin jQuery custom content scroller
source :
http://manos.malihu.gr/jquery-custom-content-scroller/
It works very well in vertical mode.
I can call mCustomScrollbar and call the update method.
See this fiddle :
http://jsfiddle.net/Vinyl/2mU7H/1/
But in horizontal mode, i have an issue when i call the update method. There is no content.
See this fiddle :
http://jsfiddle.net/Vinyl/4CW3p/1/
Do you know why ?
JS Code :
$(document).ready(function () {
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark"
});
});
$("#button").click(function () {
$("#content").show();
$("#content").mCustomScrollbar("update");
});
$("#button_close").click(function () {
$("#content").hide();
});
CSS code
#content {
display:none;
overflow:hidden;
text-align:left;
width:150px;
height:150px;
background-color: #666;
color:#fff;
}
HTML code
<div id="content">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<p id="button">Show Content</p>
<p id="button_close">Hide Content</p>
Fiddle
You forgot the autoExpandHorizontalScroll setting :)
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark",
advanced: {
autoExpandHorizontalScroll: true
}
});