[Usability] Positions of Buttons

Hello together,

i think the buttons in some cases are to far away of the settings/option. It would be very nice, if the buttons directly or near on the right site of the input fields.

edit: this screenshots are make on 1920x1080

1 Like

I believe this one is on me. When doing some changes in the log views I set width: 100% somewhere and it must be affecting all pages.

Anyone that knows HTML/CSS better than I do knows how to compromise between having 100% in the logs page but not on the other ones? I remember trying to set 100% on the log div but it didn’t work, setting it in the parent div was the only thing that worked.

When i analyse the layout, there is an div-Container with this information
ng-view="" class="content ng-scope" style="width: 100%"

when i change style="width: 100%" to style="width: 40%" it looks:

The Code-Block

<div ng-view="" class="content ng-scope" style="width: 100%"><div ng-controller="AddWizardController" class="addwizard ng-scope">
    
    <h1><div translate=""><span class="ng-scope">Add a new backup</span></div></h1>

    <form class="styled ng-pristine ng-valid">
    	<ul>
    		<li class="input" ng-click="selection.style = 'blank'" data-vivaldi-spatnav-clickable="1">
	    		<input type="radio" name="blank" id="blank" ng-model="selection.style" value="blank" class="ng-pristine ng-untouched ng-valid">
    			<label for="direct" translate=""><span class="ng-scope">Configure a new backup</span></label>
    			<div class="subtext" translate=""><span class="ng-scope">Enter configuration details</span></div>
    		</li>

            <li class="input" ng-click="selection.style = 'importfile'" data-vivaldi-spatnav-clickable="1">
                <input type="radio" name="blank" id="blank" ng-model="selection.style" value="importfile" class="ng-pristine ng-untouched ng-valid">
                <label for="direct" translate=""><span class="ng-scope">Import from a file</span></label>
                <div class="subtext" translate=""><span class="ng-scope">Load a configuration from an exported job or a storage provider</span></div>
            </li>

            <!--<li class="input" ng-click="selection.style = 'importremote'">
                <input type="radio" name="blank" id="blank" ng-model="selection.style" value="importremote">
                <label for="direct">From a remote backup</label>
                <div class="subtext">Import configuration from a backup folder</div>
            </li> -->

    	</ul>

        <div class="buttons">
            <input class="submit next" type="button" ng-click="nextPage()" value="Next >">
        </div>
    </form>
</div>

Another solution can be
form.styled .buttons { overflow: hidden; float: right; margin-right: 50%; // new option }

it looks

but i dont know how the other forms/layouts looks after these change

An solution can be to change
<div ng-view="" class="content ng-scope" style="width: 100%">

to
<div ng-view="" class="content ng-scope creationBackup">
with the css-format
div.creationBackup { width: 40%; }
OR
div.creationBackup { margin-right: 50%; }

Note: this is not tested yet