Based on the documentation, Tailwind JIT (Just In Time) mode allows to add arbitrary styles.
I can't make it work for the CSS grid's grid-template-areas property. In this simple example, I just want the sider on the left, the main content on the right.
Note that I have more complex goals, I know I don't need CSS Grid for such a simple layout.
JIT mode works as using an arbitrary padding such as px-[23px] works.
The issue lies here: [grid-template-areas:'sider content'], as if you go to the CSS tab there is the same property that works if uncommented.
Here's a playground:
<div class="grid [grid-template-areas:'sider content']">
<sider class="[grid-area:sider]">SIDER</sider>
<main class="[grid-area:content]">MAIN</main>
</div>
Because there are two different classes in [grid-template-areas:'sider content']. [grid-template-areas:'sider and content'] because of the space. You must use an underscore to handle the spaces.
[grid-template-areas:'sider_content']
Output:
.\[grid-template-areas\:\'sider_content\'\] {
grid-template-areas: 'sider content';
}
Reference
Related
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
My usual setup for each view is an outer DIV that I style as the base background etc.
<div class="outer">
<!-- Actual stuff in here -->
</div>
Then, in the SASS, I refer to it like so.
div.outer { ... }
That adds one lever of indent and seems like an unnecessary (though minor) increment in complexity. So I wonder if it's possible to add a style to the template itself. Partly, to lower the complexity. Partly, because I'm going to have text-only elements with no tags at all.
Is it possible to set the style of template from SASS files if there are no tags, only text in it?
You can apply styling to the component host element with the :host selector:
:host {
color: red;
}
See this stackblitz for a demo.
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.
When upgrading my project from Bootstrap 2.3 to Bootstrap 3.0 I noticed that adding a responsive class, e.g. hidden-sm to an element, changes its CSS display property to block.
To make things worse, the new display property is set as !important, making it difficult (or at least ugly) to overwrite by custom CSS rules.
For example, the code (view result here: http://jsfiddle.net/RZ95F/)
<h1>
Heading
<small>sub-Heading</small>
</h1>
gives a different result than the code (view result here: http://jsfiddle.net/vTuW8/)
<h1>
Heading
<small class="hidden-sm">sub-Heading</small>
</h1>
namely adding a line-break between the heading and the sub-heading.
Of course, this strange behavior also applies to much more complicated cases, making it very hard for me to upgrade my project without major markup and CSS changes just to compensate for this new Bootstrap behavior.
What did the Bootstrap team try to accomplish by changing the display behavior of those elements? And is there an easy workaround to restore the behavior known from Bootstrap 2.3 and earlier?
This is tracked on GitHub as #8869. A simple workaround shown there is to add a separate inline helper class:
.hidden-inline-xs {
display: inline !important;
}
#media (max-width: 767px) {
.hidden-inline-xs {
display: none !important;
}
}
Then you can just use
<h1>
Heading
<small class="hidden-inline-xs">sub-Heading</small>
</h1>
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}