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