Could use some help with resizing #tabs-container



  • I'm trying to change the height of #tab-container.left to be as much as needed for all open tabs.

    When live editing the css "height: fit-content;" or "margin: auto" work fine. When loaded through my user css the tab-container is completely gone though.
    I feel it's initializing before the tabs are and therefore is returned with 0 height.
    Any tips on how to implement that with the height changing when a new tab is opened?



  • @domsch1988 Sometimes it may be necessary to be liberal with your use of !important at the end of css properties when loading them from a file compared to using the live edit.



  • Oh, the !important gets attached to every line by me. I already do that, but in this specific case it doesn't work.



  • @domsch1988 Out of curiosity, what are you trying to achieve? I would have though that the labs on left container would already fill enough space for all the tabs.



  • My Tabbar is on the left. It's render slightly transparent on top of the website. I'd like it to only render as high as the number of tabs need it because i hate unused space. Here are two Screenshots for comparison:
    0_1506093887255_2017-09-22 17_22_43-.png0_1506093891614_2017-09-22 17_24_03-.png

    When making the change live, it works. When using the user css, even with important, the same change makes the tabbar 0px high.



  • @domsch1988 When you're making changes, I assume in the inspector, next to the rules you make, it will list the changes as a "inspector-stylesheet". If you click that name, it will take you to the file created. Try going in there, and just copying the contents of that as its possible there is a rule that is made there that you havent added to your custom.css.



  • @lonm
    Result is the same. I have no clue. I'm thinking it has got something to do with the hight being not updated properly. If i make the changes live, new tabs expand the tabbar. The Rule is applied properly. It's shown in the inspector. If i toggle it off and on once, everything works fine from there. It's just when restarting the Browser that it's not showing the Tabbar anymore.



  • @domsch1988 That's very strange. CSS only changes appearance of the underlying HTML, it shouldn't matter what order things load in. Could you share with the the entire contents of your custom.css file? Just to see if this behaviour gets reproduced for me.



  • @domsch1988 I tried around a bit, and you are correct. Seems like you have to implement javascript for this. I got it working.

    var test = document.querySelector("#tabs-container.left");
    test.style = "height: fit-content"

    In your OP you stated tab-container, which is the incorrect selector, but I think this is just an error here, and not in your script.

    setTimeout(function wait() {
    	var tab = document.querySelector("#tabs-container.left");
    	if (tab != null) {
    		tab.style= "height: fit-content";
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300); 
    

    This should work out fine. But tbh I don't know why it doesn't work with css only. It's a bit strange.



  • *problem solved



  • @luetage As always, you are of tremendous help. I'm not that great when it comes to JS. Your code is working perfectly. Thank you very much!


Log in to reply
 

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