Layout "verdwijnt" tussen het menu na wijziging browservenster

L.Groot · 2 November 2012

Hallo,

Het is een beetje moeilijk uit te leggen maar ik ga het proberen zo duidelijk mogelijk te doen ;).

Ik heb op een project van mij (http://www.championbuilds.com) een "in-game" layout werkend met javascript/jQuery. Dit werkt allemaal prima op één deel na: de content rechts gaat in het menu staan als je het browserscherm wijzigt qua grootte of als er een venstertje opent. Dit heb ik althans in Google Chrome. M.a.w. de content gaat helemaal naar de linkerkant toe en het menu wordt over de content heen geplakt waardoor een deel van de content wegvalt.

Ik kan niet echt een stukje code weten omdat ik niet weet waar het in kan zitten ;). De bron kan ik hier wel posten alleen daar hebben jullie ook weinig aan aangezien je die zelf ook kan opzoeken en anders de pagina idioot lang wordt.

Het betreft dus de "ingame" layout van http://www.championbuilds.com waarbij de pagina waar je op zit niet uitmaakt.
Demo account is als volgt:
Login: [email protected]
Password: demodemo
Dit systeem werkt met een max. 1 cliënt tegelijk ingelogd systeem. Op het moment dat een ander iemand inlogt op een account word jij er uitgegooid. Let daar dus op als je aan het kijken bent ;).

De layout die gebruikt wordt is een aangeschafte layout van ThemeForest, te vinden op http://themes.vibrance.co/?the…ve-Web-App-Admin-Template.

Alvast super bedankt voor het kijken en de eventuele oplossing!

Met vriendelijke groeten,

Lars

thjeu · 2 November 2012

Komt het misschien omdat je in je css dit hebt staan?

Code

.ui-layout-content {
overflow: auto;
}

Probeer eens het volgende:

Code

.ui-layout-pane-west {
padding: 0;
float: left;
clear: both;
}

Code

.ui-layout-content {
float: left;
clear: both;
}

ismail123 · 3 November 2012

Lars,

Ik weet niet precies hoe je het hebt ingesteld met javascript(jquery), maar ik zal je de bron van het probleem vertellen.

D.m.v. javascript(jquery) Wordt de css van dit stukje code bewerkt:

Code

<div class="ui-layout-center">
    <div id="view-holder" class="ui-layout-content">
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">User level</a></li>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Current page</a></li>
        </ul><h1 class="message-header">Welcome to Champion Builds!</h1>
<button id="fullscreenb"><i class="icon-fullscreen"></i></button>
<div id="centerContent" style="padding-left: 15px; padding-top: 10px;">
	Welcome back to Champion Builds!<br />
	From now on it is possible to save your builds on Champion Builds. This makes it possible to print, download or publish your build on Twitter of Facebook later.<br />
	<br />
	If you got any questions, just contact us via [email protected].<br />
	We wish you a nice game.<br />
	<br />
	Yours sincerely,<br />
	<br />
	<b>The Champion Builds Team</b>
</div> </div> <!-- END view-holder -->
    <div class="codeFooter">
      <button id="slideleftb" class="closed">Slide West</button>
      <button id="sliderightb" class="closed">Slide East</button>
    </div>


</div> <!-- END Layout Center -->

Toon Meer

De div krijgt de volgende attributen:

Code

.ui-layout-center{
position: absolute;
margin: 0px;
left: 228px;
right: 0px;
top: 43px;
bottom: 0px;
height: 338px;
width: 1138px;
z-index: 1;
display: block;
visibility: visible;
}

Toon Meer

Zodra de schermresolutie wordt verandert, krijg je andere attributen:

Code

.ui-layout-center{
position: absolute;
margin: 0px;
left: 3px;
right: 0px;
top: 43px;
bottom: 0px;
height: 238px;
width: 1138px;
z-index: 1;
display: block;
visibility: visible;
}

Toon Meer

Ik heb de hoogte verandert, dus verticaal verkleind.
De height wordt dus d.m.v. javascript verandert. Ook! Wordt de attribute "left" van 228px naar 3px verandert zodra de scherm resolutie wordt verandert.

Ik heb even met de 2 attributen die verandert waren gespeeld,
en tot ontdekking kwam ik erop dat de "left" attribute terug moet gezet worden op 228px.

Ik heb even door je js+css files gezocht maar kwam niks tegen dat "228px" of "3px" bevatte, helaas kan ik je dan niet vertellen waar de locatie van het probleem is.

Je kan er wel nog een javascript code erover heen zetten dat je "left" +225 (228-3) kan geven zodra de schermresolutie wordt verandert. Maar dat lijkt me "dirty" om het zo te fixen.

Het is inmiddels wel een oplossing, maar nog niet de juiste vind ik.

Edit:

Handig dat je gebruik maakt van chrome. Als je me een pm stuurt kan ik je met eigen ogen de probleem + oplossing laten zien. Als je het zelf niet weet te localiseren.

L.Groot · 3 November 2012

Bedankt voor jullie reacties ik ga er vanmiddag even naar kijken, moet nu werken :(.

thjeu · 3 November 2012

Chrome heeft inderdaad een eigen ingebouwde "debug" tool.
https://developers.google.com/…loper-tools/docs/elements

Je kunt hiermee gelijk je div en css bekijken en hij geeft ook aan hoe groot, hoe breed etc.

SkyNet · 3 November 2012

Het gebeurt niet alleen in Google Chrome, maar ook in Firefox.

L.Groot · 4 November 2012

Inmiddels ben ik weer thuis alleen ik heb nu alleen mijn laptop (1024x768 resolutie) ter beschikking die de fout niet heeft ;). Vanavond zit ik weer achter mijn computer met een grotere resolutie en dan kan ik het probleem weer zien en oplossen. Super bedankt voor het onderzoeken iedereen!

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Plesk installer

cpanel / whm themes

PHP Point of Sale

Probleem omtrent Tinymce

Kunnen jullie mij helpen met deze enquete

een eigen cloud sever

Probleem C++ en CL

228 Nieuwe domeinnamen Maart 2025

285 Nieuwe domeinnamen Februari 2025

190 Nieuwe domeinnamen Januari 2025

Layout "verdwijnt" tussen het menu na wijziging browservenster

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen