I need help modding tabs strip



  • Hi!
    I'm trying to center the vivaldi tabs in the tab-strip. I want that they are in center and expand when there are more of them. I tried to manipulate them (they are in a flex), but they always disappear or just don't center at all. How can I do this?



  • So far i just got away with ugly way of doing it. Just adding margin-left to the tab strip. The obvious problem is that it is not dynamic.



  • That's not a solution. I tried it as soon as you posted the first thread, but it doesn't seem possible with css only. The tabbar has many layers and the way vivaldi works (stacking tabs, moving tabs), it's very hard to find a working try. I managed to put all tabs in the middle, but they stacked and reset their position as soon as I moved them. I'm simply not good enough with css to do it, and I only know little javascript. You will have to wait for somebody else to try it. I remember someone requested tabs expanding to full width once, and no easy solution was found either.



  • They're not in a flex, flex: 1 1 auto doesn't make it a flexbox, just tells them how to resize themselves inside a flexbox. I'm trying to do something, will post updates.



  • Try this out:

    .tab-strip: {
      display: flex;
      justify-content: center;
    }
    
    .tab-position: {
      position: relative;
      left: 0 !important;
    }
    


  • Ah forgot about the new tab button. What behavior do you expect from it? Is it supposed to the right of the tabs? That's how it normally works, but I don't like how it's not symmetrical when tabs are centered. You can do

    .newtab: {
      display: none;
    }
    

    to hide it for now, so your centered tab bar looks good.



  • @Robis__ @luetage Let me know if it works for you, just messed around with Dev Tools and noted down my changes so it might be incomplete. Changing .tab-position was important to make tab actions sane, like tab-stacks and ctrl-selecting. Dragging a tab seems to lose the animation, maybe I'll work on it a bit after.



  • This is how it looks for me:

    screenshot

    Sorry for spamming replies one after the other, I was just hacking around very quickly.



  • It's nice that you include me :D but I prefer normal tabs. But yeah, it works, great job. I had the display flex and justify-content: center part, but I couldn't figure out the positioning and thought it doesn't work at all.

    Just remove the colons from the first lines and it is copy-paste ready.



  • @luetage whoops yeah accidentally wrote a Javascript object lol

    .tab-strip {
      display: flex;
      justify-content: center;
    }
    
    .tab-position {
      position: relative;
      left: 0 !important;
    }
    
    .newtab {
      display: none;
    }
    


  • Thank you ! It actually works :smiley: There is a very specific reason why I need this.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.