I create a dashboard with reactJs and react bootstrap. Due to the different size of the card on my dashboard, it's resulting the gap on my dashboard. This is the screenshot :
I want to fill the gap on my dashboard. According to the bootstrap flex documentation, I used d-flex align-items-stretch to fill the gap. Like this :
<Row>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
<FrequentUsers />
</Col>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
//Other content
</Col>
</Row>
Placing the d-flex align-items-stretch on the <Col> tag is the
only way that I found worked in my case. If I place it in <Row> tag
or in <div> tag as a container outside it, it didn't work.
The result is the y-axis stretched well as I expected, but the x-axis suddenly shrink :
So I manage my grid layout to make it wider. The grid layout is still working but it didn't affecting the card, it is only affecting the gap like there is a invisible container in it. So I'm assuming that the grid system at this point is "broken"
I'm guessing that this is because the d-flex. But as I read the documentation, it should've instead make the content fully extended to the side. Please check it on the documentation here
Based on #ChewySalmon's comment. I try to adjusting flex-basis on my card. The reason I do it directly on my card is because as I provided in a code sample in my question above, I stretched my item on a <Col> tag, which is stretch the conten vertically (as my screenshoot shown above). So I need to do it on my card (also because this is the only way that worked in my case), so it stretched horizontally. And it work perfectly. Here is the implementation code :
<Card style={{flexBasis: "100em"}}>
//my content
<Card>
I use 100em because it's the only way besides 100px that worked for me. I hard coded it like that because the value is the same in all card, which is 100em. But I recommend you using props in JSX attribute. Hope that help you who have a same problem with me in the future. Thanks to #ChewySalmon.
Related
I am using 2 internal company related components Row and Column which I can't change but they both take in style property thus could pass in any css styling.
Note that I have to use these components for other purposes.
This is currently how it looks which is incorrect.
Can see 2 issues.
Due to product subtile on the first, the second one mis aligned.
Due to more text on the description on the second, again mis aligned.
I am looking to achieve this.
Is there a way to do this. Was attempting with flex box but due to the way the divs are nested, struggling with it.
It would work if I switch it around and create by row.
Meaning don't create a column one short like this.
But go for row by row like this.
But I can't do this due to accessibility. The screen reader should read column by column. But ends up reading row by row if I do this.
Example: Product Title 1 Product Title 2 and then coming back to Cost $1000 switching between the 2 products which is incorrect.
Thus I wish to stick with creating 1 column at a time as what I have now but how can I achieve the desired row alignment? Please help. Thanks.
My code.
This is the main Row for both items.
<Row style={'I can pass styling here'}>
{products}
</Row>
This is where I am looping and creating column by column for the products.
const products = productsList.slice(0, 3) // screenshot above shows 2 but can go up to 3
.map((p, index) => (
<Column style={'I can pass styling here'}>
{/* The image, title and subtitle all come from here */}
<SelectedProduct/>
{/* price description section*/}
{price(p, index)}
{/* button and links here.
These are not having alignment issues. Fixing subtitle and description alignments should take care of this
*/}
{links(p)}
</Column>
));
Condensed SelectedProduct component.
const SelectedProduct = () => {
return (
<div className={styles.product}>
<div style={{ position: 'relative' }}>
<div>
<Link to={redirectTo}>
<Art src={url} />
</Link>
</div>
<TrackedRemoveButton type="button"/>
</div>
<Typography>
{title}
</Typography>
<Typography>
{subtitle}
</Typography>
</div>
);
};
styling in SelectedProduct
.product {
display: flex;
flex-direction: column;
align-items: center;
}
Condensed price component.
const price = (p) => {
return (
<div>
<Typography>
<span
dangerouslySetInnerHTML={{
__html: p.content,
}}
/>
</Typography>
</div>
);
}
This is a surprisingly difficult problem. Here is my solution: https://codepen.io/dlwalsh/pen/gOdayNQ
It uses flexbox with column direction. The important bits are:
The parent declaration align-items: stretch so that each item extends to the full height.
The button declaration margin-top: auto so that it (and everything beneath it) anchors to the bottom.
It works, but it relies on everything else having a fixed height. i.e.
The title and subtitle are always one line
A blank subtitle inserted when missing
There are always exactly two product links
I have a very long (height) webpage and I'm using Puppeteer to get a PDF export of the page. It's about 30,000 px long.
I'm using document.documentElement.scrollHeight to try to determine dynamically the total height but it is returning 1018 when console.log and the PDF export is showing the same.
The 1018 is the viewport height so if I change the window it changes also.
Curious why this is?
The height is returning this way even in direct inspect > console.log and not using Puppeteer.
Any ideas why the height is not correct or how to fix this?
UPDATE:
This is my layout in nuxt
<template>
<div
id="my-app"
ref="layout"
class="flex flex-col h-screen overflow-hidden bg-gray-100 font-museo-sans"
>
<main class="overflow-y-auto">
<div class="max-w-7xl mx-auto py-5 xl:rounded-lg xl:shadow-md">
<Nuxt class="transition-opacity duration-200" />
</div>
</main>
</div>
</template>
The overflow-hidden and h-screen for some reason is necessary for my-app as if I remove it, the page does not allow for scroll.
I'm not quite understanding the behavior of this though. Why would overflow-hidden and setting a height to viewport allow the scrolling of the nuxt application?
In addition, I thought documentElement.scrollHeight returns overflow hidden but I guess it does not.
I've put all my components under a div with flex-row, w-screen and content-center and for some reason when I go on reactive/mobile mode on the browser it takes about 2/3 of the screen and I can't get it to fill up the remaining screen space.
Here is the code for the View that holds all the components:
<template>
<div class="flex-row h-screen w-screen content-center bg-gray-700">
<div class="flex w-screen h-5/6 content-center" id="splash"> <Splash /></div>
<div class="flex bg-blue-800 w-screen h-5/6" id="skills"> <Skills /></div>
<div class="flex bg-green-700 w-screen h-5/6" id="projects"></div>
<div class="flex bg-pink-700 w-screen h-5/6" id="about"></div>
</div>
</template>
<script>
import Splash from '../components/Splash.vue';
import Skills from '../components/Skills.vue';
export default {
name: "Home",
components: {
Splash,
Skills
},
data: function() {
return {
}
}
}
</script>
and it ends up looking like this on mobile:
https://i.stack.imgur.com/Y6fLt.png (I put the background of the view's div container as gray to highlight how much is left of the screen)
Please help me out because I got no clue.. Thank you everyone!
You can use: w-full instead of w-screen
What you'll see in the docs and Tailwind examples, specifically in the component library of TailwindUI, is that they will create nested divs that each serve a specific purpose.
They'll have the outer div, parent container, and either apply margin/padding, then a nested div for a border, or the reverse. Then a div specifically for a flex row col, then inner divs for flex rows, etc. It's a nested structure. They don't try to use one div to accomplish too many things.
You should get familiar with Tailwind Play. You can learn a ton from this tool which is the official playground tool of Tailwind.
https://play.tailwindcss.com/
Also, check out tailwindui.com for their UI library. Some of their code, they show you, read it carefully. See the TailwindLabs Youtube channel. It is fantastic for learning basic and advanced TW.
Here's a basic strategy for full width on mobile and constrained to a breakpoint with padded content above.
<template>
<!-- outer container -->
<div class="container mx-auto sm:px-6 lg:px-8">
<!-- this would be your main flex container, through a border or anything -->
<div class="flex flex-col justify-start w-full h-screen">
<!-- now define your child flex containers, cols or rows or define CSS grid-->
<!-- you could put your nav or header here as you're in a flex col-->
<header />
<!-- now define your horizontal layout for Splash, Skills, etc.-->
<!-- or place your full height mobile content here. -->
<div
</div>
</div>
</template>
Getting layouts right are tricky. TailwindUI and Tailwind Labs have a lot of free content that can help you get the outer structure right so that you can focus on the inner content. Also, there are a lot of freely available Tailwind components that tackle this and other issues from which you can learn tips/tricks.
https://tailwindcomponents.com/search?query=layouts
Good luck!
Marcus
Im new to react (and react bootstrap) frontend and im a bit stuck. Is there a way to use a dropdown like this and have the 2 date inputs next to eachother (horizontally) instead of vertically? Orcan i only achieve that by using accordion? It needs to look like a dropdown before you click it.
This is how it looks now. And as you see it isnt quite fancy.
My current code:
return (
<Dropdown>
<Dropdown.Toggle variant="light" style={ buttonStyle } id="dropdown-basic" className="uniform-select" >
{headerTitle}
</Dropdown.Toggle>
<Dropdown.Menu>
<Form.Control
type="date"
name="startTime"
id="startDateId"
onChange={ handleStartDate }
/>
<Form.Control
type="date"
name="enddate"
id="endDateiD"
onChange={ handleEndDate }
/>
</Dropdown.Menu>
</Dropdown>
)
Help would be appreciated!
Well, im quite new too but you can probably change the flexbox properties, from a column to a row, if you havent tried it. just inspect the DOM element, and create a new css style with the classname and experiment with the flex directions, cause as far as i know most of react bootstrap components use flex anyways
The size Quasar Button component can be adjusted and from docs it seems the icon in a button should change size accordingly. See this picture for example from the docs:
When I try the icon stays same size (button changes). My code:
<q-btn
v-if="$route.name === 'resetpassword'"
class="absolute-top-right"
flat
round
wait-for-ripple
dense
size="15px"
color="primary"
icon="mdi-window-close"
#click.native="goToSignIn"
/>
What's wrong?
1. The Problem
I ran into the same problem today. But if you change the button size to an extreme number (e.g. 200px), you'll see that the icon DID change size with the button.
The problem is that the default padding area between the icon and the button is too big, which makes the icon look small comparing to the button itself.
2. The Solution
Here's how I solve it using Deep Selectors. You make a custom button component around your button code. Then give it following style:
<style scoped>
.q-btn>>>.q-icon {
font-size: 40px;
}
</style>
And also give the size attribute in your template the same size, so size="40px". Then all aspects of the button have same size.
When using Vue with 3rd party UI Frameworks/Components, Deep Selector makes it really easy to make quick changes to component styles. And the changes can also be scoped (only change style locally) if you put the scoped keyword.
A good solution is to use q-icon inside q-btn for changing the size of the icon.
<q-btn size="xs" color="primary" dense>
<q-icon name="add" size="15px"></q-icon>
</q-btn>
I used Quasar v2.0.4. With Quasar v2.0.4, you can change the icon(or button) size with size attribute.
For example:
<q-btn size="xl" icon="close" />
<q-btn size="100px" icon="close" />
But if you use size attribute with fab or fab-mini attribute , size attribute doesn't work, then, only fab or fab-mini attribute works instead of size attribute.
For example:
<q-btn size="xl" fab icon="close" />
<q-btn size="100px" fab-mini icon="close" />