I'm trying to create a basic form with tailwind css within Nuxt. I have basic Nuxt components aligned in a flex using tailwind css classes.
<!-- basic form with 6 elemtns but first and last elemnt -->
<!-- are aligned differently to the rest -->
<div class="flex justify-around p-8">
<form class="grid grid-cols-2 p-8 space-y-4 space-x-4 rounded shadow bg-white">
<NumberField label="Freight Cost" v-model="LCLState.cost" />
<NumberField label="Shipments" v-model="LCLState.shipments" />
<NumberField label="Per Shipment Fee" v-model="LCLState.perShipmentFee" />
<NumberField label="Volume" v-model="LCLState.volume" />
<NumberField label="Rate" v-model="LCLState.rate" />
<PrimaryButton #click.prevent="calculateVolume()" title="Calculate Volume" width="w-40" :disabled="LCLState.rate === null" />
<PrimaryButton #click.prevent="calculateRate()" title="Calculate Rate" width="w-40" :disabled="LCLState.volume === null" />
</form>
</div>
Everything is working as expected, except the last and first elements seem to be left-middle aligned while all the other elements seem to be left-bottom aligned. I've tried to google the problem, but based on the nature of the question I get a whole bunch of unrelated answers.
Related
Im trying to get some advice on Tailwind with div positioning using custom media breaks. Currently at screens over 350px(xs) the homepage layout is flex with flex-col direction. Yet when I set it to flex-row (flex) for large screens over 1100px(lg), it remains as flex-col and one of the flex children is hiding the other.
When I test to see if my custom screens work by changing font-color at each break (xs-lg), it works. Meaning my screens are set up fine. It just seems like its not registering changes in positioning particularly with flex but also with padding interestingly.
Sorry if this is obvious but I have read the tailwind docs and since they work with color changes It means the breaks are set up right. So I'm probably just missing something obvious.
```javascript
export default function HomeHero(){
return(
<div className={styles.HeroContainer}>
<div className={styles.HeroText}>
<div className={styles.title}>Stay connected off-grid</div>
<div className={styles.text}>paragraph text</div>
<form className={styles.form} action="/send-data-here" method="post">
<input type="text" className={styles.input} name="first" placeholder="Email Address"/>
<input type="text" className={styles.input} name="last" placeholder="Password"/>
<div className={styles.Button}><button type="submit">Log In</button></div>
<div className={styles.forgot}><Link href="/forgotpassword">Forgot your password?</Link></div>
</form>
</div>
<div className={styles.HeroImage}></div>
</div>
)
}
const styles = {
HeroContainer: 'flex xs:flex-col lg:flex-col lg:min-h-screen',
HeroText: 'flex flex-col border-2 text-left xs:p-10 md:p-24 w-1/3 lg:mt-12 lg:pr-36 lg:pl-36',
HeroImage: 'flex w-2/3 bg-hero bg-center bg-contain bg-no-repeat bg-top-32 self-stretch min-h-[500px]'
}
At first I was stumped until I realized that the flex-col on HeroText wasn't doing anything without it being a flex container. Now that I'm looking at it and your example, I think that is the problem.
Your flex direction classes are on the container which is just setting the flex direction on the HeroText div. You need to move those flex direction utilities to HeroText. Here's a Tailwind Play example: https://play.tailwindcss.com/MmfOrXgVa0 (OLD LINK)
You probably also want to rethink the styles on HeroImage. Seems like you'd want to absolutely position that.
UPDATE BASED ON COMMENTS:
Your comment changes things. The flex-direction was being updated with your with the code you had. You still had some extra classes, but that didn't stop it from working. I believe, the real issue was around using lg:bg-hero. Unless you added that as something in your config, that class wouldn't do anything, and it wouldn't be connected to the lg breakpoint.
Also, you are defining flex-1 and widths on the two elements, and these are conflicting with each other with the flex-1 winning. Because of this, when it was full screen, the background was only 50% wide, and since your content wasn't wide enough to wrap, you weren't seeing it.
If you fix those things, you should be good to go. Here is a working example in Tailwind Play: https://play.tailwindcss.com/kF7mi27UUC
Also, here would be some updated classes for your JS. I added a few classes to the HeroImage class so that it would show up:
const styles = {
HeroContainer: 'flex flex-col lg:flex-row lg:min-h-screen',
HeroText: 'flex flex-col text-left xs:p-10 md:p-24 lg:w-1/3 lg:mt-12 lg:pr-24 lg:pl-24',
HeroImage: 'lg:w-2/3 bg-center border-2 bg-cover bg-top-32 self-stretch bg-black min-h-[200px]',
}
I'm using tailwind css to style a little angular app, the problem is:
i want my form to have a fixed position at the bottom of the page but it seems that classes like "top-100 left-50" are not working
home-component.html
<main class="container bg-green-200 h-full m-auto">
<app-search class="fixed top-100"></app-search>
<app-fruits-cards></app-fruits-cards>
</main>
searchbar-component.html:
<form *ngIf="searchForm" [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="bg-slate-100 rounded p-3">
<label for="searchInput">Search</label>
<input formControlName="fruitName" type="text" id="searchInput" class=""/>
<button type="submit" class="rounded-full">search</button>
</form>
I actually tried to use the "top-100" class into the form element directly but it still doesn't work, what am I doing wrong here?
Try adding position relative to the container
Also i'm not sure about top-100 ...
check here what values are allowed with the classes of top ..
https://tailwindcss.com/docs/top-right-bottom-left
There is no default defined class top-100 the most near to it is top-96 but you can define your default in tailwind.config file or use custom value like top-[100px]
Read about:
Adding arbitrary values here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
Defining classes in the config file here: https://tailwindcss.com/docs/configuration
I need help changing a button to look like an arrow is coming out of it to show that it is the active button. The button is wrapped in a card component.
Below is a code example:
<div className="float-container">
<div className="creator-container float-child">
<div>
<Card className="bg-mainBlue rounded-xl">
<CardContent>
<Button
className=" text-white font-nunito text mx-2 pr-35 "
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
</div>
</div>
</div>
I am struggling changing the buttons appearance. My code is build in React using TypeScript. and I would like to mostly achieve this using css.
I have included a picture of my desired outcome.
Can anyone please help?
So you can make the ::before element. Set it to be display:block, then add it the backround:_mainBlue_ and transform:rotate(45deg). Dont forget to content:''. Then just play with the position.
Example:
https://codepen.io/daniel-bedn-/pen/zYWbeeP
all. I currently meet a CSS problem with Vue. Suppose I want to render multiple component by using v-for, and I want bind hover effect with each component. Once I hover my mouse on one component, there will be hover effect on that component, and the other components will keep unchanged. However, as I typed code below, if I hover my mouse on one component, all component will be affected. So, my question is how could I achieve my purpose?
<component v-for="(item, index) in items" :key="index">
<div #mouseover="hover = true" #mouseleave="hover = false">
<div v-if="hover" class="xx"> Hover Effect </div>
<div v-else> Normal Effect </div>
</div>
</component>
The answer is pretty straightforward for this problem. What you have to do is keep track of the index or the key of the element which you hover and clear it when you leave. You can write two specific methods for this if you want.
<component v-for="(item, index) in items" :key="index">
<div #mouseover="hoveredIndex = index" #mouseleave="hoveredIndex = -1">
<div v-if="hoveredIndex===index" class="xx"> Hover Effect </div>
<div v-else> Normal Effect </div>
</div>
</component>
I'm trying to make a form more responsive to handle smaller browsers. Currently, we're using bootstrap to help with the layout but I am not adverse to other alternative solutions. In this particular view, we have two columns each with varying amounts of data. The trick is the group in the upper right needs to stay at the top of the page regardless of whether we are rendering this in one column or two. The groups below the upper right section should flow below any groups from the left hand column. Here's an illustration of what we are trying to achieve:
2-column:
L1 R1
L2 R2
L3
1 column:
R1
L1
L2
L3
R2
Using Bootstrap, I'm able to get the R1 to stay at the top using col-pull/col-push, but the right hand column values under R1 flow after all values from the left hand column have rendered thus resulting in:
L1 R1
L2
L3
R2
Here's the markup that I've attempted so far. I've also posted a jsfiddle for those who need a live sample to play with at http://jsfiddle.net/jimwooley/g8r35/.
<div class="row row-fluid">
<div class="col-sm-7 col-sm-push-5 col-xs-12">R1</div>
<div class="col-sm-5 col-sm-pull-7 col-xs-12">L1<br />
L2<br />
L3</div>
<div class="col-sm-5 col-sm-push-5 col-xs-12">R2<br />
R3</div>
</div>
Note: the hights of the sections varies, so I can't just flow line two right below or beside line two left because they may fall half-way between the two. Also, I can't use columns here because the result needs to work with IE8.
Make them column 6 instead of 12? Since bootstrap looks for 12 on a page? Therefore a call of 6 or 3 should show single column. (tablet or mobile in this example). where full screen would show 2 columns.
I could be misunderstanding the question.
While I admit the duplication is not a good thing, I've had success in using the hidden-* and visible-* classes from Bootstrap.
<div class="row row-fluid">
<div class="col-sm-7 col-sm-push-5 col-xs-12">
<div>
Upper Right<br />
line 1<br />
</div>
<div class="hidden-xs" >Below Right<br />
line 1<br />
</div>
</div>
<div class="col-sm-5 col-sm-pull-7 col-xs-12">Upper Left<br />
line 1<br />
line 1<br />
line 1<br />
line 1<br />
line 1<br />
</div>
<div class="visible-xs">
Below Right<br />
line 1<br />
</div>
</div>
See here: http://jsfiddle.net/darronj/t8nYn/
Why not have R1 just push-right and allow the columns to wrap around it? That way it will always be on top. It would need to be first.