Edges to the browser window

bdot

I haven't had this issue at home because I downloaded a program that puts boundaries to all my windows since Windows 10 is such a piece of junk. I'm guessing Microsoft assumes all users only have 1 window open at a time.

I now have a new job and I can use Vivaldi. We have Win 7. I'm running into an issue though in that there is no boundary on the edges of the browser window so that when it's not maximized, I don't know where the edge is located so I find myself constantly clicking on the window in the background instead of the one I meant to click on.

Is there a way within Vivaldi to make an edge to the browser window? I know IE, Firefox, and Chrome have edges.

duarte.framos

Under Tools > Settings > Appearance > Use Native Window the very first option. Does it solve your problem?

Pesala

@bdot The edge is still there, you can see it by the drop shadow. Whether there's a border or not makes no difference, you have can still see the double-arrow cursor that is necessary to resize the window.

Ssee the Modding Forum if you really must waste some space.

enc0re

@Pesala Are you serious with sentence that border makes no difference? Tell that to UI designers of all operating systems.

Not everybody has enabled shadows. In my company, they are disabled by GPO. You think that finding where is the right spot for draging window on white surface is the good thing?

Tiamarth

@bdot Hi there, this feature is not currently built in to Vivaldi unless you set it to use native window borders, which also adds the system's title bar. I posted a request in the feature requests thread about this issue: https://forum.vivaldi.net/post/136901

Add an option to show a border around Vivaldi even when Native Window is disabled, see this thread. Some users may like to have the clear distinction between Vivaldi and other running apps on their system, but not like the titlebar.

I also posted some custom css that adds a border to Vivaldi to use as a workaround in the meantime:

#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

enc0re

@Tiamarth Yup, I'm using this. Do you know what to add to be able to drag window from that border? I do not know React and other stuff which are used here, I just tried few commands from .css file and it caused to me draging window from everywhere.

Tiamarth

@enc0re No I'm afraid I don't. You could try asking over on the modding subforum, someone else might have an idea.

pafflick

@enc0re said in Edges to the browser window:

Do you know what to add to be able to drag window from that border?

I'm not sure I know what you mean but you could try adding box-sizing: border-box; to place the borders "inside" the window instead of placing them "outside" of it (it's the default behavior).

enc0re

@pafflick Like that?
#browser {
border: 1px solid #ff0000 !important;
box-sizing: border-box;
}

This is not working, no dragging.

I meant that if I add border, window drag is not working when clicking on border.

pafflick

@enc0re Hmmm, that's interesting. I thought you were talking about the position of the border, but I see that's not the case. I'm able to drag the window anyway, I wonder why isn't it working for you...

What OS do you use? I'm on Windows 10, I have no problems with dragging the window whether with or without the custom border...

bdot

@duarte.framos
I tried Native Windows option originally but if I remember correctly (I'm not at work right now), it screwed up something else.

bdot

@Pesala said in Edges to the browser window:

@bdot The edge is still there, you can see it by the drop shadow. Whether there's a border or not makes no difference, you have can still see the double-arrow cursor that is necessary to resize the window.

Ssee the Modding Forum if you really must waste some space.

uh.... there is no drop shadow showing. It's just white space and looks exactly like the white space on the browser window behind it. There is literally no distinction between one window and the next window.

bdot

@Tiamarth said in Edges to the browser window:

@bdot Hi there, this feature is not currently built in to Vivaldi unless you set it to use native window borders, which also adds the system's title bar. I posted a request in the feature requests thread about this issue: https://forum.vivaldi.net/post/136901

Add an option to show a border around Vivaldi even when Native Window is disabled, see this thread. Some users may like to have the clear distinction between Vivaldi and other running apps on their system, but not like the titlebar.

I also posted some custom css that adds a border to Vivaldi to use as a workaround in the meantime:
#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

Where do you stick that CSS code? Is there an INI file or somthing that it goes in?

pafflick

@bdot You should probably read this if you haven't done that before.

Pesala

@bdot said in Edges to the browser window:

uh.... there is no drop shadow showing.

I don't recall changing any settings. I assumed that everyone would see the drop shadow. Probably it depends on your OS. I am using Windows 10 64-bit Creator's Edition.

enc0re

@pafflick I'm using Win 7 x64, three computers and draging from border nowhere works :(.

Tiamarth

@enc0re To clarify, are you trying to make it so you can drag the window from the border, or are you having issues being able to resize the window from the border?

Because I think Pafflick was explaining he had no issues moving the window by dragging from the tab bar, and I don't have any issues with that either. But you wouldn't be able to make the border drag the window with just css: you'd need to create a new element (e.g. .border) behind .app, while also giving .app a margin of however wide you want your border to be, and then you'd need to make .border draggable. You can make an element draggable with just css, but you can't make only an element's border draggable with just css, and since you'd have used Javascript to do everything else it would just be easier to use it for that as well. You can make an element draggable in css in Chromium-based browsers like Vivaldi with -webkit-app-region: drag;

If you're having issues using the border to resize the window, I can't reproduce that here.

enc0re

@Tiamarth First sentence is right. I would like to drag window from the border.

I don't have issues with resizing window, or draging from tab bar. When there is no border enabled, I can just blindly move mouse up and then drag window. But with border enabled, there is 1px dead zone, and I have to carefuly move cursor 1px down, below that border. I hope its clear now.

Tiamarth

@enc0re Oh, I see now. You must be using some css different from the css I provided here, as you wouldn't have that issue with the css I wrote.

#browser {
    border-top: 0;
    border-right: 1.5px solid rgba(47,52,63,0);
    border-bottom: 1.5px solid rgba(47,52,63,0);
    border-left: 1.5px solid rgba(47,52,63,0);
}

See, this defines the border for each side of the browser independently from each other so that it's possible to remove the border from the top of the window, allowing for the possibility to drag it.

enc0re

@Tiamarth Yea, I didn't miswatched your code, I just used one line command to set whole border. It seems that now only solution to me is your code, by not enabling top border. Anyway, thanks for helping.