pagination alignment showing vertical instead of horizontal










-3















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
/>









share|improve this question
























  • 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















-3















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
/>









share|improve this question
























  • 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













-3












-3








-3








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
/>









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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

















  • 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












2 Answers
2






active

oldest

votes


















0














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.






share|improve this answer

























  • 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


















0














Please try to customize the Ul and Li tags. Please find the improved code.



https://codesandbox.io/s/64223kj733






share|improve this answer






















    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
    );



    );













    draft saved

    draft discarded


















    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









    0














    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.






    share|improve this answer

























    • 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















    0














    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.






    share|improve this answer

























    • 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













    0












    0








    0







    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.






    share|improve this answer















    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.







    share|improve this answer














    share|improve this answer



    share|improve this answer








    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

















    • 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













    0














    Please try to customize the Ul and Li tags. Please find the improved code.



    https://codesandbox.io/s/64223kj733






    share|improve this answer



























      0














      Please try to customize the Ul and Li tags. Please find the improved code.



      https://codesandbox.io/s/64223kj733






      share|improve this answer

























        0












        0








        0







        Please try to customize the Ul and Li tags. Please find the improved code.



        https://codesandbox.io/s/64223kj733






        share|improve this answer













        Please try to customize the Ul and Li tags. Please find the improved code.



        https://codesandbox.io/s/64223kj733







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 '18 at 2:39









        vamsi krishnavamsi krishna

        11




        11



























            draft saved

            draft discarded
















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Use pre created SQLite database for Android project in kotlin

            Darth Vader #20

            Ondo