• Community
    • Community
    • Vivaldi Social
    • Blogs
  • Forum
    • Vivaldi Forum
    • Categories
    • Recent
    • Popular
  • Themes
    • Vivaldi Themes
    • My Themes
    • FAQ
  • Contribute
    • Contribute
    • Volunteer
    • Donate
  • Browser
    • Vivaldi Browser
    • Latest News
    • Snapshots
    • Help
Register Login

Vivaldi

  • Community
  • Themes
  • Contribute
  • Browser

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Desktop Feature Requests
    4. Multiple Row Tabs

    Multiple Row Tabs

    Scheduled Pinned Locked Moved Desktop Feature Requests
    tabstab barnice to have
    245 Posts 59 Posters 77.6k Views 31 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • OlegVartanov
      O
      OlegVartanov @Pesala
      last edited by

      @Pesala I've removed this extra row with just margin-bottom: -30px; , but at the cost of Trash Can, now it disappeared) Also I'm using this browser only because of that multi row option.

      1 Reply Last reply Reply Quote 1
    • fpdragon
      F
      fpdragon
      last edited by fpdragon

      I brought back the "new tab" button and removed the emty line. It's quick and dirty hack but I still drop it here for those who are interested:

      /* multiline tabs */

#tabs-container {
    height: auto !important;
	/* margin-bottom: -30px; */
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar > .newtab {
    /* right: 0px !important; */
	/* top: 0px !important; */
	right: 0px !important;
    position: absolute;
    width: 30px !important;
	

	
	/* right: 10px !important; */
    /* top: -30px !important; */
    /* position: relative !important; */
    /* display: inline-block; */
    /* padding: 0; */
    /* vertical-align: top; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: grey; */

}
      OlegVartanov
      O
             1 Reply Last reply       Reply Quote 1
    • fpdragon
      F
      fpdragon
      last edited by fpdragon

      And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

      /* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}
      A
      S
             3 Replies Last reply       Reply Quote 3
    • A
      alexander.gorbovets
      last edited by alexander.gorbovets

      Mod to make equal width for all tabs including pinned. Width of all tabs is set to 100px. Pinned tabs are marked with asterisk:

      /* Equal width tabs without shrinking  */
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 100px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 100px !important;
}


.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
      T
             1 Reply Last reply       Reply Quote 1
    • OlegVartanov
      O
      OlegVartanov @fpdragon
      last edited by

      @fpdragon Thanks a lot!

      1 Reply Last reply Reply Quote 0
    • A
      alexander.gorbovets @fpdragon
      last edited by alexander.gorbovets

      @fpdragon said in Multiple Row Tabs:

      And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

      Version of this mod without tab borders:

      /* multiline tabs */
#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;


 /* border-style: solid; */
 /* border-width: 1px; */
 /* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
 left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */


 border-style: none;
 border-width: 0;
 border-color: transparent;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
 left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

 border-style: none;
 border-width: 0;
 border-color: transparent;
}
.toolbar-tabbar {
 /* width: 30px; */

 /* border-style: none; */
 /* border-width: 0; */
 /* border-color: lime; */
}
.toolbar-tabbar > .newtab {
 top: 0px !important;
 left: 0px !important;
    position: absolute !important;

 /* border-style: solid; */
 /* border-width: 1px; */
 /* border-color: red; */


}
      1 Reply Last reply Reply Quote 0
    • S
      sabine @fpdragon
      last edited by

      @fpdragon Hi, I like this mod very much and it brings me back to Vivaldi after I've ignored it for a long time just because of this missing feature.
      Thank you very much for the work!!
      Regarding the "New Tab" button... is it possible to "glue" it to the Trash icon? I'm not an expert at programming. Just a question as I'm so used to having it at the right side.

      Regards,
      Sabine

      1 Reply Last reply Reply Quote 0
    • B
      ButterSig
      last edited by

      Thanks for updating the code @fpdragon and @alexander-gorbovets - Vivaldi is now usable for me again!

      Is it possible to have the tabs stretch to fit the row? Or some kind of max width? The latest code posted by Alexander seems to keep the tabs at a specific width no matter how many tabs fill the tab bar.

      1 Reply Last reply Reply Quote 0
    • S
      sabine @fpdragon
      last edited by

      @fpdragon
      I've managed to make the tabs a bit shorter, so they do better fit my (wide) screen and still remain readable (and this even although I have no clue of programming 🙂 ).
      One more question: is it possible to limit the number of visible lines to 3 lines and in case there are more tabs than fit on 3 lines, have a slider to move the invisible lines up (and down)?

      Thanks,
      Sabine

      S
             1 Reply Last reply       Reply Quote 0
    • S
      sabine @sabine
      last edited by

      @sabine said in Multiple Row Tabs:

      @fpdragon
      I've managed to make the tabs a bit shorter, so they do better fit my (wide) screen and still remain readable (and this even although I have no clue of programming 🙂 ).
      One more question: is it possible to limit the number of visible lines to 3 lines and in case there are more tabs than fit on 3 lines, have a slider to move the invisible lines up (and down)?

      Dear @fpdragon and/or @alexander-gorbovets,

      Happy New Year to you !

      did you see my 2 contributions to this subject some 3 weeks ago?
      Would love to hear your opinion to my sugestions.

      Thanks,
      Sabine

      ?
             1 Reply Last reply       Reply Quote 0
    • ?
      A Former User @sabine
      last edited by

      @sabine I'm sorry for not responding earlier, I was ignoring this thread as it produced too many comments.

      I'm not sure if we can help you until you show us the code — every little change has impact (though sometimes not so big) and there are also many versions and I don't know which one you are using.

      S
             1 Reply Last reply       Reply Quote 2
    • S
      sabine @Guest
      last edited by A Former User

      @potmeklecbohdan No problem :-). There's no hurry. Thank you for answering.

      I'm using the code that was originally published by fpdragon and/or alexander.gorbovets on nov.15:

      }
.resize {
  display: block !important;
}
.tab-strip {
  display: block;
}
.tab-strip > span {
  display: inline-block;
}
.tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: auto !important;
  width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 120px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 120px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}


.tab-strip > .newtab {
  left: 0px !important;
  top: 0px !important;
  position: relative !important;
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.tab-header > .favicon > svg {
  height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
/* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}

      Thanks,
      Sabine

      modedit Fixed the code block

      ?
             1 Reply Last reply       Reply Quote 0
    • ?
      A Former User @sabine
      last edited by

      @sabine Sorry, but I cannot read or copy it easily now and it wastes quite much space on the page. Please add an otherwise empty line like this (see below) before and after the code (edit the post, do not make a new one).

      ```
      S
             1 Reply Last reply       Reply Quote 0
    • S
      sabine @Guest
      last edited by

      @potmeklecbohdan

      I don't know how to edit my message, but maybe this works :

      
}
.resize {
  display: block !important;
}
.tab-strip {
  display: block;
}
.tab-strip > span {
  display: inline-block;
}
.tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: auto !important;
  width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 120px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 120px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}


.tab-strip > .newtab {
  left: 0px !important;
  top: 0px !important;
  position: relative !important;
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.tab-header > .favicon > svg {
  height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
/* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}
      ?
             1 Reply Last reply       Reply Quote 0
    • ?
      A Former User @sabine
      last edited by A Former User

      @sabine You can edit a post by right-clicking the three dots in bottom right corner and choosing edit.

      Here is the code:

      For newer version see later post

      /* multiline tabs */
#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: green; */
    max-height: 90px;
    overflow-y: scroll;
}

.tab-strip::-webkit-scrollbar {
    background: transparent;
    border: none;
    width: 10px;
    height: 0;
}
.tab-strip::-webkit-scrollbar-corner,
.tab-strip::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}
.tab-strip::-webkit-scrollbar-button {
    display: none;
}
.tab-strip::-webkit-scrollbar-thumb {
    width: 10px;
    border: none;
    border-radius: min(5px, var(--radius));
}

.tab-strip > span {
    display: inline-block;
}

.tab-strip > span > .tab-position {
    left: 26px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}

.tab-strip > span > .tab-position > .tab {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
    border: 1px solid grey;
}
.tab-strip > span > .tab-position > .tab:not(.pinned) {
    width: 220px !important;
}
.tab-strip > span > .tab-position > .tab.pinned {
    width: 30px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
    content: '*';
    font-family: "Courier New", serif;
    margin-bottom: -20px;
}

.tab-header > .favicon > svg {
    height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title,
#tabs-container .tab.pinned.tab-mini .tab-header .title {
    display: flex !important;
}

.toolbar-tabbar > .newtab {
    top: 0px !important;
    left: 0px !important;
    position: fixed !important;
    display: inline-block;
    padding: 0;
    vertical-align: top;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: red; */
}
.toolbar-tabbar > .newtab > button {
    margin-right: 0 !important;
    height: 26px !important;
    width: 26px !important;
    min-height: 26px !important;
    min-width: 26px !important
}
      S
             1 Reply Last reply       Reply Quote 0
    • S
      sabine @Guest
      last edited by

      @potmeklecbohdan
      The code does not yet work. I can still produce 50 tabs and 11 rows are created and visible. So no limitation to the rows.
      I've probably not sufficiently made clear my point. I suggested an enhancement of the code so the number of tab-rows shown is limited to a predefined number. The number of rows (e.g. 3 or 4) can be configured in the code. Should there be more tabs than would fit within the 3 rows, there should pop-up a slider at the right that can be pulled up (or down) to see the next tab row. Like it used to be in old FF.

      Regards

      ?
             1 Reply Last reply       Reply Quote 0
    • ?
      A Former User @sabine
      last edited by

      @sabine I understand you very well and you can be sure that I wouldn't give you the code if it didn't work for me. There must be some difference between our setups that breaks it for you (and for me it makes it impossible to give you code that works for you).

      S
             2 Replies Last reply       Reply Quote 0
    • S
      sabine @Guest
      last edited by

      @potmeklecbohdan Thank you very much for your efforts. I'll try to find out what the reason is and will let let you know, so other users can benefit from our findings. Have a nice evening.

      Sabine

      1 Reply Last reply Reply Quote 0
    • S
      sabine @Guest
      last edited by

      @potmeklecbohdan forgot to ask... where is the line in your code to configer the number of rows?

      ?
             1 Reply Last reply       Reply Quote 0
    • ?
      A Former User @sabine
      last edited by

      @sabine max-height: 90px;, line 14

      S
             1 Reply Last reply       Reply Quote 1
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    • 1
    • 2
    • 3
    • 4
    • 5
    • 12
    • 13
    • 2 / 13
    • First post
      Last post

    Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status