pagination alignment showing vertical instead of horizontal
update2:
I tried targetting by creating class name but still I am not able to target ul tag, is there any way can we target ul tag in developer tools for ul tag if I give display flex its working fine, can you please help me
<div className=classes.paginationT>
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
className=classes.paginationT
/>
</div>
const styles = theme => (
paginationT:
//border :'2xpx solid red',
color: 'red',
display:'flex'
);
update1:
I gave display: inline to this tag but still not working.
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
style= display: ' inline'
/>
further I debugged but not sure how to target ul tag, since I dont see any ul tag inside my pagination component.
- I got the pagination working but the problem is its not getting aligned horizontal.
- even I gave inline styles its not working.
- am I missing any values.
- can you tell me how to fix it.
- providing sandbox and code snippet below.
https://codesandbox.io/s/wnrxo98vr8
https://codesandbox.io/s/3rzvo66lwq
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
/>
javascript css reactjs redux material-ui
add a comment |
update2:
I tried targetting by creating class name but still I am not able to target ul tag, is there any way can we target ul tag in developer tools for ul tag if I give display flex its working fine, can you please help me
<div className=classes.paginationT>
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
className=classes.paginationT
/>
</div>
const styles = theme => (
paginationT:
//border :'2xpx solid red',
color: 'red',
display:'flex'
);
update1:
I gave display: inline to this tag but still not working.
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
style= display: ' inline'
/>
further I debugged but not sure how to target ul tag, since I dont see any ul tag inside my pagination component.
- I got the pagination working but the problem is its not getting aligned horizontal.
- even I gave inline styles its not working.
- am I missing any values.
- can you tell me how to fix it.
- providing sandbox and code snippet below.
https://codesandbox.io/s/wnrxo98vr8
https://codesandbox.io/s/3rzvo66lwq
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
/>
javascript css reactjs redux material-ui
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
Use CSS.display: flex | inline
etc
– TJBlackman
Nov 1 '18 at 15:40
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22
add a comment |
update2:
I tried targetting by creating class name but still I am not able to target ul tag, is there any way can we target ul tag in developer tools for ul tag if I give display flex its working fine, can you please help me
<div className=classes.paginationT>
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
className=classes.paginationT
/>
</div>
const styles = theme => (
paginationT:
//border :'2xpx solid red',
color: 'red',
display:'flex'
);
update1:
I gave display: inline to this tag but still not working.
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
style= display: ' inline'
/>
further I debugged but not sure how to target ul tag, since I dont see any ul tag inside my pagination component.
- I got the pagination working but the problem is its not getting aligned horizontal.
- even I gave inline styles its not working.
- am I missing any values.
- can you tell me how to fix it.
- providing sandbox and code snippet below.
https://codesandbox.io/s/wnrxo98vr8
https://codesandbox.io/s/3rzvo66lwq
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
/>
javascript css reactjs redux material-ui
update2:
I tried targetting by creating class name but still I am not able to target ul tag, is there any way can we target ul tag in developer tools for ul tag if I give display flex its working fine, can you please help me
<div className=classes.paginationT>
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
className=classes.paginationT
/>
</div>
const styles = theme => (
paginationT:
//border :'2xpx solid red',
color: 'red',
display:'flex'
);
update1:
I gave display: inline to this tag but still not working.
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
style= display: ' inline'
/>
further I debugged but not sure how to target ul tag, since I dont see any ul tag inside my pagination component.
- I got the pagination working but the problem is its not getting aligned horizontal.
- even I gave inline styles its not working.
- am I missing any values.
- can you tell me how to fix it.
- providing sandbox and code snippet below.
https://codesandbox.io/s/wnrxo98vr8
https://codesandbox.io/s/3rzvo66lwq
<Pagination
activePage=this.state.activePage
itemsCountPerPage=10
totalItemsCount=this.state.comments.length
pageRangeDisplayed=5
onChange=this.handlePageChange
/>
javascript css reactjs redux material-ui
javascript css reactjs redux material-ui
edited Dec 1 '18 at 1:31
inji inji
asked Nov 1 '18 at 15:35
inji injiinji inji
7210
7210
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
Use CSS.display: flex | inline
etc
– TJBlackman
Nov 1 '18 at 15:40
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22
add a comment |
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
Use CSS.display: flex | inline
etc
– TJBlackman
Nov 1 '18 at 15:40
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
Use CSS.
display: flex | inline
etc– TJBlackman
Nov 1 '18 at 15:40
Use CSS.
display: flex | inline
etc– TJBlackman
Nov 1 '18 at 15:40
1
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22
add a comment |
2 Answers
2
active
oldest
votes
From the react-js-pagination
npm page:
The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.
So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.
npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
https://codesandbox.io/s/rm5xj7qy3q
It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.
Also, you're using Material Design, which has it's own pagination components...
Read About Material Design Pagination Here.
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
add a comment |
Please try to customize the Ul and Li tags. Please find the improved code.
https://codesandbox.io/s/64223kj733
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53104484%2fpagination-alignment-showing-vertical-instead-of-horizontal%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
From the react-js-pagination
npm page:
The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.
So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.
npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
https://codesandbox.io/s/rm5xj7qy3q
It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.
Also, you're using Material Design, which has it's own pagination components...
Read About Material Design Pagination Here.
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
add a comment |
From the react-js-pagination
npm page:
The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.
So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.
npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
https://codesandbox.io/s/rm5xj7qy3q
It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.
Also, you're using Material Design, which has it's own pagination components...
Read About Material Design Pagination Here.
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
add a comment |
From the react-js-pagination
npm page:
The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.
So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.
npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
https://codesandbox.io/s/rm5xj7qy3q
It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.
Also, you're using Material Design, which has it's own pagination components...
Read About Material Design Pagination Here.
From the react-js-pagination
npm page:
The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.
So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.
npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
https://codesandbox.io/s/rm5xj7qy3q
It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.
Also, you're using Material Design, which has it's own pagination components...
Read About Material Design Pagination Here.
edited Nov 2 '18 at 13:19
answered Nov 1 '18 at 21:04
TJBlackmanTJBlackman
6671623
6671623
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
add a comment |
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
hey thanks for your reply...but still pagination is not in horizontal in your sandbox link...can you update in sandbox....its so confusing :(
– inji inji
Nov 2 '18 at 0:42
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
Updated my answer's link.
– TJBlackman
Nov 2 '18 at 13:20
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
thanks for your reply...can you help me out since I shouldnt use twitter bootstrap...can you see my updated question
– inji inji
Nov 2 '18 at 20:31
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
youtube.com/watch?v=hrZqiCUx6kg
– TJBlackman
Nov 3 '18 at 22:37
add a comment |
Please try to customize the Ul and Li tags. Please find the improved code.
https://codesandbox.io/s/64223kj733
add a comment |
Please try to customize the Ul and Li tags. Please find the improved code.
https://codesandbox.io/s/64223kj733
add a comment |
Please try to customize the Ul and Li tags. Please find the improved code.
https://codesandbox.io/s/64223kj733
Please try to customize the Ul and Li tags. Please find the improved code.
https://codesandbox.io/s/64223kj733
answered Nov 13 '18 at 2:39
vamsi krishnavamsi krishna
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53104484%2fpagination-alignment-showing-vertical-instead-of-horizontal%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
hey I added cards, tabs, everything only I am not able to align, still its been negative to my question. can you tell me what should I do to make it positive
– inji inji
Nov 1 '18 at 15:39
Use CSS.
display: flex | inline
etc– TJBlackman
Nov 1 '18 at 15:40
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 1 '18 at 15:47
@Paulie_D hey thanks I updated the question, is it fine now
– inji inji
Nov 1 '18 at 17:08
@TJBlackman hey it didnt work...can you update in my sandbox
– inji inji
Nov 1 '18 at 20:22