I have a Hit const which displays products (from Algolia). I use it in my main component. I would like to display the products in a row, however, I don't know how to do that, since if I write the row class around the const (in the main component) it doesn't work.
The Hit const is in a way mapping multiple products and I can't create a row from it, because placing row around Hit in the main component treats it as if it were one item and placing row inside of Hit treats each product as one row.
How could each product from Hit be displayed as a column inside a row?
This is the Hit const:
const Hit = ({ hit }) => (
<div className="col-6 col-sm-4 col-md-3">
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: "125%",
background: `url("${hit.image}") center center/cover`,
}}
></div>
<p className="font-size-subheader mb-2 font-weight-medium">
{hit.product}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{hit.cena} <span className="hit-em">€</span>{" "}
</p>
</a>
</div>
);
This is the return of the main component, where Hit is used:
return (
<InstantSearch
searchClient={searchClient}
indexName="Besedilo"
searchState={props.searchState}
createURL={props.createURL}
onSearchStateChange={props.onSearchStateChange}
>
<div className="py-5 my-5">
<div className="py-4">
{/* Main Content */}
<div className="custom-container">
<div className="row">
<div className="col-12 col-lg-10 offset-lg-2">
<div className="collection">
<div className="row mb-5 collection-1">
<Hits hitComponent={Hit} /> //this is how Hit is used
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</InstantSearch>
);
I want to extract the strings text_i_wantA, text_i_wantB, text_i_wantC from each of the 3 children of each of the 10 div class = col-12. For readability i only included two of the otherwise same structured divs. For now i am fine if it doesent return the actual .content[0] as i can also parse that later.
Here is the full code:
title,date,name,number = [],[],[],[]
while True:
soup = bs(driver.page_source, 'html5lib')
for div in soup.find_all('a', attrs={'title':'ad i'}):
titl = div.get_text(strip=True)
title.append(titl)
else:
break
for col in soup.find_all('div', attrs={'class':'col-12'})[1::2]:
row = []
for entry in col.select('div.row div'):
target = entry.find_all(text=True, recursive=False)
row.append(target[0].strip())
name.append(row[0])
date.append(row[1])
number.append(row[2])
next_btn = driver.find_elements_by_css_selector(".page-next button")
if next_btn:
actions = ActionChains(driver)
actions.move_to_element(next_btn[0]).click().perform()
time.sleep(4)
else:
break
driver.close()
Expected output:
title = ["text_i_already_have1", "text_i_already_have2", ...]
date = ["text_i_wantA", "text_i_wantAA", ...]
name = ["text_i_wantB", "text_i_wantBB", ...]
number = ["text_i_wantC", "text_i_wantCC", ...]
Problem: Actual output with slice [1::2]
title = ["text_i_already_have1", "text_i_already_have2", ...]
date = ['text_i_wantA', 'text_i_wantAA', ...],
name = ['', '', '', '', '', '', '', '', '', '']
number = ['', '', '', '', '', '', '', '', '', '']
Is it a problem with my css or the loop itself?
The first line works fine:
print(soup.find_all('div', attrs={'class':'col-12'})) without slice gives me the list of the divs i want to extract the text_i_want from:
[<div class="col-12">
<a href="/url" target="_blank" title="ad i">
text_i_already_have1
</a>
</div>,
<div class="col-12">
<div class="row">
<div>
date: text_i_wantA
</div>
</div>
<div class="row">
<div>
source: text_i_wantB
</div>
</div>
<div class="row">
<div>
number: text_i_wantC
<span class="processlink">
<a href="url" title="text_i_dont_want">
text_i_dont_want
</a>
</span>
</div>
</div>
</div>,
<div class="col-12">
<a href="/url" target="_blank" title="ad i">
text_i_already_have2
</a>
</div>,
<div class="col-12">
<div class="row">
<div>
date: text_i_wantAA
</div>
</div>
<div class="row">
<div>
source: text_i_wantBB
</div>
</div>
<div class="row">
<div>
number: text_i_wantCC
<span class="processlink">
<a href="/url" title="text_i_dont_want">
text_i_dont_want
</a>
</span>
</div>
</div>
</div>,
<div class="col-12">
<a href="/url" target="_blank" title="ad i">
text_i_already_have
</a>
</div>,
<div class="col-12">
<div class="row">
<div>
date: text_i_wantAAA
</div>
</div>
<div class="row">
<div>
source: text_i_wantBBB
</div>
</div>
<div class="row">
<div>
number: text_i_wantCCC
<span class="processlink">
<a href="/url" title="text_i_dont_want">
text_i_dont_want
</a>
</span>
</div>
</div>
</div>,
<div class="col-12">
.
.
.
.
</div>]
The text_i_dont_want is always inside the <span class="processlink"> element, which itself is the last child of one of the 3 <div class="row"> elements which are inside each of the 10_per_page <div class="col-12"> elements.
If I understand you correctly now, this should get you there (or at least close enough):
date,name,number = [],[],[]
for col in soup.find_all('div', attrs={'class':'col-12'}):
row = []
for entry in col.select('div.row div'):
target = entry.find_all(text=True, recursive=False)
row.append(target[0].strip())
date.append(row[0])
name.append(row[1])
number.append(row[2])
The output of, for example, print(date), should be:
['text_i_wantA', 'text_i_wantAA']
Question
Hi, I am trying to print the first two categories images with col-xl-6, and the remaining categories images with col-xl-4. The size of the first two images is different from the last three. Please let me know how it will work. If you can share code it'll be awesome! Thanks.
Blade-File
#foreach ($categories as $cat)
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 column">
<a href='/products/{{$cat->id}}'>
{{-- style="height: 460px; width:345px; --}}
<div class="img">
<img class="cat-img mx-2" id="cat-img" src="/uploads/categories/{{$cat->image_url}}" />
</div>
</a>
<div class="title text-center">
<h2>{{$cat->title}}</h2>
<a href='products/{{$cat->id}}'>Shop Now</a>
</div>
</div>
#endforeach
There is a $loop variable available that you can check if the index of current item with.
https://laravel.com/docs/8.x/blade#the-loop-variable
#if ($loop->index === 0 || $loop->index === 1)
// do stuff
#endif
I am pulling data from an api and mapping over the JSON array to display the results, how do I use bootstrap grid to make the elements show one beside another instead of like a list?
//App.js
<div>
<FileHeader/>
{this.state.films.map(film=>(
<div className="container">
<div key={film.id} id='cardItem' className=''>
<MovieCard film={film}/>
</div>
</div>
))}
</div>
And this is the MovieCard Component
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
How do I use the grid element to display the cards side by side?
You should only have 1 container for your items, so get it out of the map(), then insert a row in which you'll inject the card elements. You'll have to decide how much items you want on each row. In the example below you'll have 12 items per row as a row is made of 12 columns and col-xs-1 means each item will take 1 column in the row.
You can decide it per each screen size using col-xs, col-sm etc...
<div className="container">
<div className="row">
{this.state.films.map(film => (
<div key={film.id} id="cardItem" className="col-xs-1">
<MovieCard film={film} />
</div>
))}
</div>
</div>
Please try this....
<div className="container">
<div className='row'>
<FileHeader/>
{this.state.films.map(film=>(
<div key={film.id} id='cardItem' className="col-sm-3"><MovieCard film={film}/>
</div>
))}
</div>
</div>
Moviecard component...
render() {
var film = this.props.film;
return(
<div className='card' style={{width:'18rem'}}>
<div className="card-body">
<h5 className="card-title">{film.title}</h5>
<h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
<p className='card-text'>{film.description}</p>
</div>
</div>
)
}
I'm writing a code where there's an arrayList having two names in it i.e.Bob & Steve and i want to display them such that if Bob is displayed it should be green in color and if Steve is displayed it should be REd in color.
Component.CSS
.Bob{
font-weight:bold;
color:green;
}
.Steve{
color:red;
}
Component.HTML
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p class="Bob">{{st}}</p>
</div>
<div class="col-2">
<p class="Steve">{{st}}</p>
</div>
</div>
</div>
in Component.Ts
Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts
You can provide class based on condition .
Modify your code like below :
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
</div>
</div>
</div>
Here is the working example :
Working Stackblitz Example
When we have a large number of elements and we can showed it with different background we can adopt several approaches.
Has an array of styles/background and use the index
colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="colors[i]">item.data</div>
</div>
The background was a "property" of "items"
items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="item.background">item.data</div>
</div>
We can use
[style.css_property]="value"
//or
[className]="class"
//or
[ngClass]="{'class':condition}"
In your case, Aman, I think that it's better that your "items" has a property "class" that was, e.g.
{data:...,class:'bold-true green-true'}
So, when you want add a item, you can make a function
getClass()
{
let class="";
if (this isBold)
class="isBlod-true";
if (this.isCut)
class=class+" isCut-true";
if (this.isGreen)
class=class+" isGreen-true";
...
return class
}
And when you add an item, you can do
items.push({data:...,class:this.getClass()})
Then the code
<div *ngFor="let item of items;let index=i>
<div [className]="item.class">item.data</div>
</div>
make the trick