Hi, I’m developing an ionic app for recommendation. I’m using ion-list to show the list of shops. The default separate line between ion-list is not full width of the screen.
I’m trying to use ion-list with no-lines attribute and modify the scss file to draw the separate line. However, the css is not working when the code is put in .scss file. Instead, If I put the css as inline style attribute like <ion-item style="border-bottom: 1px solid grey"> then it works as expected.
Is there anyone know what’s the reason and is there any other way to avoid using inline style? Thanks in advance.
You need to check your SASS file. Ensure that you’ve used the correct CSS selectors and that you’re following the DOM element hierarchy of the stylesheet.
Also, it is not clear to me what you’re doing. If you need your <ion-list> to take up the full width of the screen, please check to ensure that none of the parent elements are using the Ionic padding attribute. This will cause every single one of its child elements to have some padding (not taking up the full width of their container).
I checked the file and the selector should be no problem. When I test it in browser, the css of no-lines attribute have a higher priority than the css of border wrote by myself.
Below is what I want: A list showing items and separated by a full width divider.
but for default ion-list, the separate is start after the img. like this
So this is the full width separate line I want to create.
Try the other way around: Let the list lines be there, remove the padding from the <ion-content> and the <ion-item>, add padding to whatever inner container you are using. !important should be the last resort.
