Automatic margins when using css - javascript

If i used CSS my div automatically margins left and right if i use inline style its works perfect,i don't understand whats going when i use CSS
i'm using React.js
I'm trying to style with CSS,its gives auto margin to left and right
<div className="container">
<h1>hello</h1>
</div>
//CSS code
.container
background-color: lightblue;
}
//i'm using inline style its works perfect
``
<div style={{backgroundColor: 'blue'}}>
<h1>hello</h1>
</div>
``

I guess you have included bootstrap in your project and container is a bootstrap class, so it adds style from bootstrap library as well
Try using any other class name it will just work fine.

Please note, container is a bootstrap class, so it adds style from bootstrap library as and try using any other classes name it will be worked excellent.

Related

Background image in tailwindcss using dynamic url (React.js)

I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?
I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.
I would do:
style={{backgroundImage: `url(${fetchedImgSrc})`}}
Edit:
It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.
The code looks like:
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
I think I have found a solution other than simply using a style attribute.
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
This works perfectly fine.
Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
you can just use backgroundImage in Style
const bag2 = "https://via.placeholder.com/500"
<div
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>
Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs.
In my case image was coming from an API. If it is the case, stick to style attribute.
In the solution below - bgImage is a prop.
<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`}
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>
If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.
I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
then I just copied my new generated jsx code-
style={{ backgroundImage: 'url(/about.jpg.webp)' }}

How to style mat-card-title inside mat-card

I wanted to truncate mat card title for overflow. Using
overflow:hidden
text-overflow:ellipsis
white-space: nowrap
But the style is overriden by the standard mat-card style. I used mat-card-header ::ng-deep for the same but I think ng-deep is deprecated now. Does anyone know of a better approach for the same?
This might help:
<mat-card class="example-card">
<mat-card-header>
<mat-icon>more_vert</mat-icon>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title title="This is a test title header">This is a test title header</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
</mat-card>
and you can override the css class in your component i.e. your component is (app.component.css):
.mat-card-title {
overflow:hidden ;
text-overflow:ellipsis;
white-space: nowrap;
width: 30vw;
}
You must need to specify width for text overflow ellipsis, Thanks
Instead of using the ng deep, you can override the class css.
Go to the main css file common/style and inspect your material class from browser.
Use the full class name which you found from browser.
Apply the css, save and run.

How to make JQuery UI Layout Plugin work inside Boostrap body-content div

We have been using JQuery UI Layout Plugin for most of our projects. We have started a new project that uses Bootstrap as the framework. We attempted a simple layout example, using Bootstrap containers, but the layout will not render, in fact no html is rendered. My feeling is that somehow Bootstrap and JQuery UI Layout are not playing nicely. Now, for the code:
This is what we are trying to do for HTML:
<div class="container body-content">
<div class="ui-layout-west">
<div>West</div>
</div>
<div class="ui-layout-center">
<div>Center</div>
</div>
</div>
This is what we are trying to do for Javascript:
$(document).ready(function(){
var globalLayout = $('div.body-content').layout();
});
However, the HTML doesn't render at all (we don't see the 'West' or 'Center' text). But if I change the HTML to no longer use the body-content div and use 'body' to create the layout, we are fine.
Working HTML:
<div class="container body-content"></div>
<div class="ui-layout-west"><div>West</div></div>
<div class="ui-layout-center"><div>Center</div></div>
Working JS:
$(document).ready(function(){
var globalLayout = $('body').layout();
});
Here is a JSFiddle of it not working and here is a JSFiddle of it working.
The issue seems to be with height calculations.
The following CSS adjustment helps in your demo although is not a perfect fix. With some additional CSS inspection I'm sure you will find the proper final adjustments to make
html,body, .container{height:100%}
http://jsfiddle.net/25m9qsar/1
This page at Bootstrap's site tells you how to circumvent the issue.
In short, box-sizing:border-box messes around some calculations.
If you want to test this quickly, go to your bootstrap css file and comment the lines that modify box-sizing, then refresh the page -- this worked well for me.
Just add this CSS snippet:
.ui-layout-container, .ui-layout-pane {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Javascript output won't accept any CSS styling

I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.

Align jQuery List

I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.

Categories