I'm testing Tailwind CSS, and I'm facing this issue. It was working before and it's still working in some cases, but on this line below its inverting the breakpoints somehow. See the screenshots below
Example code:
<h1 className='sm:text-4xl text-8xl'>
AndiiCodes<span className="dot">.</span>
</h1>
Full screen (text should be 8xl, but it's taking the sm: size of 4xl): screenshot
Medium/small screens: screenshot
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [
require('flowbite/plugin'),
],
}
CSS file
#tailwind base;
#tailwind components;
#tailwind utilities;
I also tried to set a base font size first then change it on other screens, but I'm still running into the same issue.
To use the breakpoints in Tailwind, you target a specific breakpoint which applies that style to that breakpoint and ALL breakpoints above that.
By default, styles applied by rules like md:flex will apply at that breakpoint and stay applied at larger breakpoints.
If you’d like to apply a utility only when a specific breakpoint range is active, stack a responsive modifier like md with a max-* modifier to limit that style to a specific range.
So if you want the 8xl size to be applied for the larger screens and above, you need to use: sm:text-4xl lg:text-8xl.
Related
I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf
This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f
I have a font in a fonts/ directory. How do I load this into the game, then use it on a text object in my game? I haven't been able to find anything on using fonts in Phaser 3.
I tried out multiple methods and property from the
https://labs.phaser.io/index.html?dir=&q=
https://photonstorm.github.io/phaser3-docs
this both link for the phaser3 but not able to set the width of the perticular text
i also try to apply font using css but it also not working for me.
Thanks in advance.
First, load the font from your css in the normal way, something like this (if the url is relative like below, it must be relative to the css file):
#font-face {
font-family: "Indie Flower";
src: url(../fonts/IndieFlower.ttf) format("truetype");
}
Then use the font family in your text objet style:
function create() {
this.add.text(10, 10, 'My text', {
fontFamily: 'Indie Flower',
fontSize: '2.5em'
});
}
See the Phaser.js docs to see all the available properties.
You may have issues about font loading: I mean the font may not display on load, and you may have to wait for the load then change your text in order to display the font; I'm not an expert about it and there are many different solutions for this. For my part when I tested my answer, I just added this line at the beginning of the html body, and it fixed the issue:
<span style="font-family:'Indie Flower'"></span>
I've been looking into TinyMCE and I was wondering if there was a way for setting colors and font-sizes in the default forecolor and fontsizeselect toolbar as classes instead of inline CSS styles.
So instead of something like:
<span style='color: #fff;font-size:18px'>Text here</span>
It's going to look like:
<span class='f_col_white f_size_xl'>Text here</span>
The short answer to this is "no" - the plugin does not work this way.
Inserting inline styles means that content will render the same in the editor as it would when rendered later in a browser. Attaching classes would mean that you would have to load CSS into the editor and load that same CSS into a rendered web page for the content to look the same. Certainly not impossible (or overly difficult) but would require more work to get right.
If you want these types of behaviors you can create your own plugins based on the ones provided by TinyMCE (e.g. textcolor for the foreground color issue) and modify the plugin to work as you desire.
forecolor can be only configured via Text Color Options. All of the options are applying inline styles.
An alternative way is to define color styles in style_formats like so:
tinymce.init(
toolbar: "styleselect",
content_css: "https://the-stylesheet-which-contain-classes-you-defined",
style_formats: [
{ title: "White Color", classes: "f_col_white", inline: "span" }
],
// other options
)
I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change???
if so can some one pls let me know
thanks
For Panel headers:
To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default
To change the background you would need to modify: x-panel-header-default
For tab headers you need to modify:
For the text:x-tab-inner
For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active
Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.
For styling the text in the tab headers:
Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.
This will affect the text within each tab title in the TabContainer.
Example:
a.ajax__tab_tab {
color: #00898D;
}
You don't use css directly
you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.
Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.
Here are the things that I have tried:
Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
Lots of Googling and Reading Documentation
Has anyone else had this problem? any help/suggestions would be greatly appreciated.
Screenshot posted here
Try using the background property instead of the background-image property.
A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":
#myApp.sc-toolbar-view { ... }
A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html.
After that, you will have to prefix your css class with $theme:
$theme.sc-toolbar-view { ... }
Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:
$theme {
.sc-toolbar-view { ... }
.button { ... }
...
}
This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.