Reactivesearch: Resultcard dimensions

[rafrox]

Is there a way to change the ResultCard dimensions?

[davidklebanoff]

You can modify the ResultCard's default width and height with your own CSS rules. You would want to specify your own CSS classes via the innerClass functionality, and then use the class you provided as the selector for your custom CSS.

More on the innerClass property can be found here.

[rafrox]

Thank you very much ! One last question sorry: in the RangeSlider is it possible to see the values when you scroll? I can see start and ed value but cannot see any value in the bar itself so hard to control and set a new value. Cheers

[davidklebanoff]

@rafrox - That sounds like #284.

[rafrox]

Thanks again. I am still trying to understand the inner class you mentioned in your previous answer. I have checked all however I am still unsure how to change the dimensions of the card itself. I was able to work the title, image, etc but the card (with shade behind) is still the same size. Which of the options shall I use?
ResultCard component supports innerClass prop with the following keys:

resultsInfo
sortOptions
resultStats
button
pagination
list
listItem
image
title
poweredBy

[davidklebanoff]

Unfortunately I've never used the feature before on ResultCard, so I don't know which innerClass applies to which elements. If I had to guess, perhaps list or listItem?

[rafrox]

I will give it a try :+1:

[davidklebanoff]

Ok, my curiosity got the best of me. listItem provides a class to the individual cards.

Example:
https://codesandbox.io/s/v6qprpz02y

[divyanshu013]

Thanks for helping @davidklebanoff. Also @rafrox ResultCard is an opinionated component with some default styles. If you want absolute control over the result items you may also check out ReactiveList.

[rafrox]

Thanks for your reply ! I have deleted resultcard and added the followingÇ

componentId="SearchResult"
dataField="Title"
stream={true}
pagination={false}
paginationAt="bottom"
pages={5}
sortBy="asc"
size={10}
loader="Loading Results.."
showResultStats={true}
onData={(res) =>

{res.Title}{res.Price}

}
onResultStats={(total, took) => {
return "found " + total + " results in " + took + "ms."
}}
react={{
and: ["CitySensor", "SearchSensor"]
}}
/>

However I still see "card" like results. Do you mind to help on how to
customize the width and height of the squares where the results are shown?

Thank you very much !

On 24 March 2018 at 15:39, Divyanshu Maithani [e-mail]
wrote:

Thanks for helping @davidklebanoff https://github.com/davidklebanoff.
Also @rafrox https://github.com/rafrox ResultCard is an opinionated
component with some default styles. If you want absolute control over the
result items you may also check out ReactiveList
https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/appbaseio/reactivesearch/issues/308#issuecomment-375846424,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjfXqNV5u93a1okJRB4sQU9fFcq9u5_Tks5thc4HgaJpZM4S5bDB
.

--
Rafael Souza

[divyanshu013]

Can you share a code sandbox? It should just show you plain results. For example, check this codesandbox

[rafrox]

I think I have just destroyed my page :{

See the code if you can help I appreciate. The price range selector is
showing however not working properly as well.

https://qx1pp7q9zq.codesandbox.io/

Thank you !

On 24 March 2018 at 17:04, Divyanshu Maithani [e-mail]
wrote:

Can you share a code sandbox? It should just show you plain results. For
example, check this codesandbox https://codesandbox.io/s/m7km7o14px

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/appbaseio/reactivesearch/issues/308#issuecomment-375849722,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjfXqHIWANAYGvomU4DTXWkDz1VKbhKUks5theH4gaJpZM4S5bDB
.

--
Rafael Souza

[divyanshu013]

It seems like you're running a sortBy in ReactiveList and the dataField is set to Title. Sort will only work on keyword type (check network tab for the elasticsearch specific error). You can fix this issue by setting the dataField to Title.raw (.raw multifield is used by appbase for storing data as keyword).

Here is a working fork of your sandbox.

[rafrox]

Thanks again ! Do you know the reason why this is not appearing in
beautiful boxes as they used to appear when I was using ResultCard? Also
images are not loading with Reactivelist :"

On 24 March 2018 at 17:56, Divyanshu Maithani [e-mail]
wrote:

It seems like you're running a sortBy in ReactiveList and the dataField
is set to Title. Sort will only work on keyword type (check network tab
for the elasticsearch specific error). You can fix this issue by setting
the dataField to Title.raw (.raw multifield is used by appbase for
storing data as keyword).

Here https://codesandbox.io/s/k9kx46m15v is a working fork of your
sandbox.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/appbaseio/reactivesearch/issues/308#issuecomment-375851722,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjfXqBY9jnDqt4AvcN_mYC_hU7ObHgY_ks5the4cgaJpZM4S5bDB
.

--
Rafael Souza

[divyanshu013]

That's because ReactiveList doesn't provides any styles by default. You can style your result items the way you want them to appear. For the images, try passing them to an img tag. Check this example for more info.