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>
Related
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
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.
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..
I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.