Unexpected<hr> line appear when having scrollbar vertically (when height exceed 100%) - css

how the title says the problem is with a line that can be seen in the next image:
If I remove the table, let's say to not have scrollbar vertically, the line also dissapear:
What I tried:
To see If html, body, div root (I use react) use height 100% but not.
To see with inspect element if that line is a hr or an element that can be removed, it's not
The only one solution seems to remove padding left-right to override the line or I don't know.
React HTML code:
return (
<React.Fragment>
<Navbar/>
<section className="container__ide">
<div className="container__settings">
<Tooltip title={'Schimbarea marimii textului pentru editorul text'} placement="left">
<Select
value={codeFontSize}
onChange={handleChangeFontSize}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}}
>
{
selectFontSizeOptions.map((fontSize) => {
return <MenuItem key={fontSize} value={fontSize}>{fontSize} px</MenuItem>
})
}
</Select>
</Tooltip>
<Button>
<FaBug/>
</Button>
</div>
<div className="container__problem">
<div
className="container__statement"
>
<div className="container__top__statement">
<span>
Descriere
</span>
</div>
<div className="container__inner__statement">
</div>
</div>
<div
className="container__code"
>
<div className="container__top__code">
<span>
Solutie
</span>
<button>
Rulare cod
</button>
</div>
<div className="container__inner__code">
<Editor
height="300px"
defaultLanguage="sql"
defaultValue="// some comment"
theme="my-theme"
fontSize="20px"
onMount={handleEditorOnMount}
/>
</div>
</div>
</div>
<div className="container__result">
<MaterialTable
columns={[
{ title: 'Adı', field: 'name' },
{ title: 'Soyadı', field: 'surname' },
{ title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
{ title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 34 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1988, birthCity: 42 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1989, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1989, birthCity: 63 }
]}
title="Demo Title"
icons={tableIcons}
/>
</div>
<div className="container__comments">
<button>Adauga comentariu</button>
</div>
</section>
</React.Fragment>
)

Related

vuedraggable custom style for each individual item

I need to have each vuedraggable item to have different styling in the wrapper tag (for example based on the element's index) like so:
<div class="wrapper">
<div class="grid_item" style="grid-row: 1">
I am Item 1
</div>
<div class="grid_item" style="grid-row: 2">
I am Item 2
</div>
<div class="grid_item" style="grid-row: 3">
I am Item 3
</div>
</div>
I know this is a very simple example that doesn't really need the index but suppose a more complex scenario where it is necessary to have access to the index in the draggable component (not its child template).
Suppose the current component looks like this:
<template>
<div class="wrapper">
<draggable
:list="items"
class="grid_item"
item-key="name">
<template #item="{ element }">
I am {{ element.name }}
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
items: [
{
name: 'Item 1'
},
{
name: 'Item 2'
},
{
name: 'Item 3'
},
],
}
},
methods: {
rowForItem(index) {
return `grid-row: ${index + 1}`;
}
},
}
</script>
<style>
.wrapper {
display: grid;
}
.grid_item {
background-color: gray;
}
</style>
How can I make use of the rowForItem method here?

Matching flex distance for heading of table and content

I have a table with heading and entries under it.
I want the heading and entries aligned with each other.
Table.jsx:
<div className="home-trending">
<h1 className="home-trending-heading"> CRYPTO TRENDING ON DEX</h1>
<div className="cex-trending-data">
<div className="dex-content-heading bold">
<p className="cex-content-heading-item">Chain</p>
<p className="cex-content-heading-item">Token Amount (out)</p>
<p className="cex-content-heading-item">Token Amount (in)</p>
<p className="cex-content-heading-item">TXN Value</p>
<p className="cex-content-heading-item">Wallet Type</p>
<p className="cex-content-heading-item">Time</p>
<p className="cex-content-heading-item">Twitter</p>
</div>
{topDEXTrades.slice(0, 10).map((trade) => {
return (
<TrendingDexRows
chain={trade.chain_name}
time={trade.trade_time}
token_out={trade.token_out}
token_in={trade.token_in}
trade_id={trade.id}
symbol_out={trade.symbol_out}
symbol_in={trade.symbol_in}
value={trade.txn_value}
hash={trade.txn_hash}
wallet={trade.wallet}
category={trade.category}
timeToGo={timeToGoSec}
href={twitterHref}
detailedView={true}
view="large"
/>
);
})}
</div>
</div>
Table.css:
.dex-content-heading {
display: flex;
justify-content: space-between;
}
Rows.jsx:
<div>
<div className="cex-trending-row">
<div className="cex-trending-row-name row-item">
<img
src={chainIcon(props.chain)}
alt="btc"
className="base-asset-img"
/>
<p className="trending-symbol">{props.chain}</p>
</div>
<p className="row-item bold">{millify(props.token_out)}</p>
<p className="row-item bold">{millify(props.token_in)}</p>
<p className="row-item bold">{millify(props.value)}</p>
<p className="row-item" style={categoryStyle(props.category)}>
{categoryName(props.category)}
</p>
<p className="row-item"> {props.timeToGo(props.time)}</p>
<div>
<a
href={props.href(
props.value,
props.token_out,
props.token_in,
props.chain,
props.symbol_out,
props.symbol_in
)}
target="_blank"
rel="noreferrer"
style={{ textDecoration: "none", paddingRight: "25px" }}
>
<img
src={Twitter}
alt="twitter"
className="graph-icon-img-dex"
style={{ marginLeft: "10px" }}
/>
</a>
</div>
</div>
<hr className="horrizontal-line" />
</div>
Row.css:
.cex-trending-row {
display: flex;
}
.row-item {
flex: 1;
}
The heading and the rows are not aligned with each other. How do I make sure they are perfectly aligned? Which flex property can be used to make sure both divs have the same amount of space between the items of the div?
Here's an example of using grid with React.
const App = () => {
const headingData = [
"Chain",
"Token",
"Title 3",
"EzPz",
];
const dataArr = [
{ chain: "curve", token: "4m", foo: "bar", lemon: "squeezy" },
{ chain: "bird", token: "5m", foo: "tar", lemon: "teasy" },
{ chain: "lard", token: "1m", foo: "guitar", lemon: "jeezy" },
{ chain: "hard", token: "20k", foo: "blar", lemon: "measly" },
{ chain: "charged", token: "ayyyy", foo: "mars", lemon: "⚰" },
];
return (
<div className="myGrid">
{
headingData.map(str => <div key={"head-" + str}>{str}</div>)
}
{
dataArr.map((o,i) => [
<div key={"data-chain-"+i}>{o.chain}</div>,
<div key={"data-token-"+i}>{o.token}</div>,
<div key={"data-foo-"+i}>{o.foo}</div>,
<div key={"data-lemon-"+i}>{o.lemon}</div>,
])
}
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);
.myGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Position absolute div hides after going outside of its parent container and into another container

The title almost says it all. But here I provided some examples and a sandbox for you to see what I'm talking about.
Here is a link to the sandbox that I created and added all dependencies.
As you can see in the first picture, my dropdown menu goes behind everything and part of it literally becomes hidden. It's there but not visible
And here is what a dropdown should look like:
I thought to myself that the problem might be because of the z-index. But the element has a z-index: 1000; style applied to it and you can see the applied styles and selected element in chrome inspect in the below picture. As you can see the element's full rectangle is highlighted in inspect but is not visible.
But there is a position: fixed; header with a dropdown menu inside of it which uses react-bootstrap dropdown as well. But it is shown perfectly and without any problems. I gave that header a static position and here is the result. The dropdown was still being shown perfectly.
I've been thinking and searching about this problem for weeks and still couldn't find a solution. Any help will be much appreciated and thank you in advance.
import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import { Dropdown } from "react-bootstrap";
function UsersAdmin() {
const users = [
{
id: 1,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 2,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 3,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
}
];
const columns = [
{
name: "language item",
selector: "id",
sortable: true,
width: "90px"
},
{
name: "language item",
selector: "first_name",
sortable: true
},
{
name: "language item",
selector: "last_name",
sortable: true
},
{
name: "language item",
selector: "email",
sortable: true,
grow: 1.5
},
{
name: "language item",
selector: "mobile",
sortable: true
},
{
name: "language item",
selector: "created_at",
sortable: true,
grow: 2
},
{
name: "language item",
cell: (row) => (
<div style={{ width: 50, height: 50 }}>
<img
src={`${process.env.REACT_APP_BASE_URL}/storage/${row.avatar}`}
style={{ width: "100%", borderRadius: "50%" }}
/>
</div>
),
width: "75px"
},
{
name: "language item",
cell: (row) => (
<Dropdown>
<Dropdown.Toggle size="sm" />
<Dropdown.Menu size="sm">
<Dropdown.Item>
<i className="fa fa-edit mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="mdi mdi-eye mr-1" /> {"language item"}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
),
width: "75px"
}
];
return (
<>
<div className="container-fluid">
<div className="p-3">
<h2>{"language item"}</h2>
</div>
<div className="card" style={{ width: "100%" }}>
<div className="card-body">
<DataTableExtensions exportHeaders columns={columns} data={users}>
<DataTable
columns={columns}
data={users}
pagination
defaultSortAsc={false}
defaultSortField="updated_at"
noHeader
/>
</DataTableExtensions>
</div>
</div>
</div>
</>
);
}
export default UsersAdmin;
it's not about z-index. Your selection is hiding because the container of your table has overflowY hidden:
.hkMDrI {
position: relative;
width: 100%;
border-radius: inherit;
overflow-x: auto;
overflow-y: hidden;
min-height: 0;
}
So you won't be able to see what is hide outside the height of that div.
Width your current html I don't think it has any solution unless you don't need scrolling with that table, which I doubt.
Changing the html I would place your .dropdown-menuoutside the scrolling div however you will need javaScriptto position the element the right place, under the arrow icon.

v-spacer in datatable grouping header

I have a Vuetify project. I'm using the template with a slot group.header, so far so good.
Now I want to use a <v-spacer> in this template. Its in a <v-sheet>.
When I use the <v-spacer></v-spacer> I expect the content on the same line. But it will be on the next line. How can I display the button after the spacing on the same line, user Vuetify's system?
codepen
https://codepen.io/h3ll/pen/VwWOxdJ?editors=1010
HTML
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th #click="toggle" colspan="12" class="ma-0 pa-0">
<v-sheet>
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].category }}
<v-spacer></v-spacer>
<v-btn x-small>I WANT TO BE ON THE RIGHT SIDE</v-btn>
</v-sheet>
</th>
</template>
</v-data-table>
javascript
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{ text: 'Category', value: 'category', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
},
...
],
}
},
})
Update
I can fix it with normal css like
<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="12">
<v-sheet>
<div #click="toggle" style="display: inline; width: 100vw">
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].folder }}
</div>
<div style="display: inline; float: right;">
<v-icon #click="deleteItem(item)">mdi-dots-vertical</v-icon>
</div>
</v-sheet>
</th>
</template>
```
But I wondering why Vuetify v-spacer is not working
v-spacer is basically just a div with the style flex-grow: 1. So to get this to work the parent container of the v-spacer needs to have display: flex.
In your case you can add this to v-sheet:
<v-sheet class="d-flex">
<!-- content -->
</v-sheet>

How to specify height: fit-content with TailwindCSS?

Using TailwindCSS I'm trying to have a <div> fit to the height of its child, a <button>. My code is as follows:
<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
<textarea
role="text-input"
className="resize-none flex-1"
placeholder="INPUT"
/>
<textarea
role="text-output"
className="resize-none flex-1"
placeholder="OUTPUT"
readOnly
/>
<div className="w-full flex flex-none"> // This is the troublesome div
<button>
Submit!
</button>
</div>
</form>
Reading through the docs and doing a google search I can't seem to find a way to do this, ideally I'd like to set a class such as h-fit-content (something like this) but it doesn't seem to exist.
Thanks in advance!
Tailwind has now the class w-fit.
Tailwind has now the class h-fit.
you can create custom classes in your tailwind configuration for future use.
example:
module.exports = {
important: true,
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors: {
...
},
animation: {
...
},
width: {
...
},
margin: {
...
},
height: {
76: '18rem',
78: '19rem',
82: '22rem',
97: '28rem',
98: '31rem',
99: '38rem',
100: '40rem',
'fit-content': 'fit-content(20em)',
},
fontFamily: {
mps: ['Clarkson', 'Helvetica', 'sans-serif']
},
flex: {
2: '1 1 25%',
3: '1 1 30%',
4: '1 1 40%',
5: '1 1 50%',
6: '1 1 60%',
}
},
},
variants: {
extend: {},
},
plugins: [],
}
I managed to fix my issue by setting h-full in both <textarea> and setting flex-none in my problematic <div>, resulting in the following code:
<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
<textarea
role="text-input"
className="h-full resize-none flex-1"
placeholder="INPUT"
/>
<textarea
role="text-output"
className="h-full resize-none flex-1"
placeholder="OUTPUT"
readOnly
/>
<div className="w-full flex flex-none"> // This is the troublesome div
<button>
Submit!
</button>
</div>
</form>

Resources