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
Related
I am trying to add a different margin for large screens, and my breakpoints are not working. They work elsewhere except in this specific component.
My React.js component:
<Link to={`/dashboard/files/${name}`} className="hover:text-black">
<div className="bg-white h-24 w-28 rounded-2xl m-2 sm:m-4 inline-block p-1.5 cursor-pointer hover:shadow-md">
<div className="h-16 w-20 m-auto"> {icon} </div>
<Para content={name} />
</div>
</Link>
The m-4 class is being overridden by a value in _spacing.scss. I don't know what that file is or where it comes from. It's overriding the m-2 class with !important.
Have you tried overriding the value from the external SCSS file by adding your own "important" modifier? The exclamation point should be placed after the breakpoint variant value. For example:
<div className="sm:!m-4 ..." />
See: https://tailwindcss.com/docs/configuration#important-modifier
If you run into a lot of problems with SCSS overrides and want to ensure that your Tailwind utility classes always apply, you could instead add the important option to your tailwind.config.js:
module.exports = {
important: true,
}
I'm using the
U.S. Web Design System (USWDS)
in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?
Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.
According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.
Can anyone help me to either:
Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?
Below is a simplified snippet of my HTML:
<link href="https://cdn.jsdelivr.net/npm/uswds#2.8.0/dist/css/uswds.min.css" rel="stylesheet" />
<form class="usa-form">
<div class="usa-form-group">
<label class="usa-label" for="somefield1">Sample label</label>
<input class="usa-input" type="number" name="somefield1" value=0 />
</div>
<div class="usa-form-group">
<label class="usa-label" for="somefield2">Another label</label>
<input class="usa-input" type="number" name="somefield2" value=0 />
</div>
</form>
You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css
I try to use pure css grid system like explained in the documentation but I'm not able to make it work on desktop resolution and mobile like Pixel 2 resolution.
Instead of going on 2 lines like this :
I got this letter-spacing problem and the div goes on the same line :
Like to code example
<div class="pure-g">
<div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-9-24">
<div class="l-box">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-1And5x"></i>
<strong class="fa-stack-1x label-white">4</strong>
</span>
<label>Test:</label>
</div>
</div>
<div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-15-24">
<div class="l-box">
<input class="pure-radio" id="montant" name="montant" type="text" value="">
</div>
</div>
</div>
There is a problem with your grid system and your media queries.
sm specifies the behavior only for screen sizes with a width of at least 568px. Below that your problem occurs.
To solve this add the pure-u-1-1 class respectively - you could say it defines your standard behavior. This alone won't work though because you make use of another stylesheet for normalizing your CSS. Put your normalizing CSS file in front of the other stylesheet in your code, otherwise it overrides some of your other CSS rules (keyword cascading style sheet). Always mention your normalizing CSS files first!
Also in this case the pure-u-md-1-1 class seems obsolete because it does not specify another behavior than pure-u-sm-1-1. The latter already defines the same behavior for all screen sizes of at least 568px.
I'm working in a codebase that is using Bootstrap 3. According to their documentation this is how you create a basic grid structure:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
The code base I'm currently working in applies the grid structure in the following way.
<div class="form-group">
<label class="control-label col-sm-4"> Name<span class="text-danger">*</span> </label>
<div class="col-sm-8">
<input type="text" class="col-xs-10" value="Default" name="panel:expandedContentContainer" id="id9428">
</div>
</div>
I've never seen the grid applied in this way and I just want to make sure this won't cause problems down the road. I have two questions. Is it okay to use '.col-- without a row? And is it okay to put '.col--' directly on elements?
In Bootstrap 3, the .row class will apply a negative margin of ($grid-gutter-width / 2) to both the left and right.
The .col-* classes will apply a padding of ($grid-gutter-width / 2) to both the left and right.
Adding the .col-* class to the sub elements will not necessarily cause you problems, but unless you override the padding on .col-* through your own CSS you will find elements will be indented more that you were perhaps hoping for.
Yes, you can use '.col--' without a row. Then it just isn't vertical align. more information about that: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
And yes it is okay to put 'col--' directly on element. I don't have any bad experience with that.
I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click