Table afdekken met een div?

[Erwin_Br]

Hoi,

Kan iemand mij helpen met het volgende? Ik heb een tabel die ik wil afdekken met een ietwat doorzichtige div. De div moet de tabel dus overlappen. Na 2 uur verschillende oplossingen geprobeerd te hebben kom ik er niet meer uit. De div zorgt ervoor dat de tabel over andere content wordt geplaatst, wat al verkeerd is, en bovendien wordt de div zelf niet over de tabel gezet.

De code is als volgt:

HTML:

<style type="text/css">
.greyedOutContainer {
    position:relative;
}
#greyedOut {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
}

<!-- cut! -->

<div class="greyedOutContainer"><div id="greyedOut">
            <table class="inspectionTable" width="100%">
                <tr>

<!-- cut! -->

Ik probeer dus de div die de tabel moet afdekken (#greyedOut) in een div container te zetten (.greyedOutContainer) die een relative position heeft, in de hoop dat dit ervoor zorgt dat alles netjes onder elkaar blijft staan. Dat werkt dus niet, want de #greyedOut div zet de tabel over andere content heen.

Dat #greyedOut niet over de tabel gezet wordt snap ik ook niet. Ik heb 'm een absolute position meegegeven? Wat kan ik nog meer doen?

Any clues?

Alvast bedankt. Ik hoop dat ik het helder genoeg heb uitgelegd...

[posttoast]

Maak even een mockup (in Paint bijvoorbeeld) van wat je écht wilt. Je bent namelijk al in oplossingen aan het denken (<div>'s, <table>'s) terwijl het misschien heel anders kan.

[Erwin_Br]

Ik heb een formulier dat uit meerdere onderdelen (= tabellen) bestaat. Ik wil deze onderdelen dynamisch (via Javascript) kunnen "disabelen" door er een half doorzichtige div overheen te plaatsen.

[RobIII]

Erwin_Br schreef op donderdag 11 november 2010 @ 12:18:
Ik heb een formulier dat uit meerdere onderdelen (= tabellen) bestaat. Ik wil deze onderdelen dynamisch (via Javascript) kunnen "disabelen" door er een half doorzichtige div overheen te plaatsen.

Waarom gooi je er dan een div overheen? Je kunt binnen een table toch gewoon alle inputfields disablen (.disabled = true) en een class op de table zetten om zo bijv. de tekst greyed te maken?

[Erwin_Br]

Dat gaat niet zo eenvoudig, helaas, want de pagina is een custom form binnen een SharePoint site. Dat betekent dat ik geen inputfields heb, maar server controls die de html code voor de inputfields genereren tijdens het laden van de pagina.

Ik zou in principe achteraf middels JavaScript alle inputfields door kunnen lopen en dan alsnog op disabled zetten, maar daar heb ik in het verleden nog veel meer problemen mee gehad en kost nog veel meer tijd.

Ik hoop dus met bovenstaande oplossing een makkelijke manier te vinden om grote delen van het form te disabelen. Fijnmazige controle over textfields e.d. heb ik daarnaast toch niet nodig...

[ Voor 19% gewijzigd door Erwin_Br op 11-11-2010 13:02 ]

[posttoast]

Dat zou toch niet uit moeten maken? Als er uiteindelijk <input>'s gegenereerd worden, dan kun je die met JS benaderen en gebruiken.

[BCC]

Hij wil een form hebben in sharepoint waarbij zaken 'gedisabled' zijn doordat er een div bovenopstaat.

Ten eerste gaat dit niet werken omdat input elementen altijd een maximale Z-index hebben. Ten tweede is het nogal security by obscurity, want met bijvoorbeeld firebug kun je het zowieso aanpassen. Ten derde waarom sharepoint ?

De enige nette manier is om de data severside in de sessie van de gebruiker te duwen.

[ Voor 11% gewijzigd door BCC op 11-11-2010 13:12 ]

[posttoast]

Die derde vraag lijkt me niet zo relevant BCC. Inderdaad, de oplossing van Erwin_Br is niet de meest elegante, daarom proberen we met betere suggesties te komen. Natuurlijk is het debiel dat dit soort dingen in SharePoint niet zo netjes zijn, maar ik denk niet dat Erwin dat nu eventjes aan de kant kan gooien.

[Bosmonster]

Zelfs met Sharepoint kun je gewoon velden met JS disablen hoor Uiteindelijk komt zelfs uit Sharepoint gewoon html. (nou ja gewoon, sort of dan).

Maar eerlijk gezegd zou ik het probleem (of de oplossing) in een andere richting zoeken. Waarom is het namelijk van belang dat de velden disabled worden?

[ Voor 15% gewijzigd door Bosmonster op 11-11-2010 13:25 ]

[OkkE]

Ik ben het met Bosmonster eens. Het hangt van de reden af, welke oplossing het beste (of minst lelijk) is. Maar er zijn vrij weinig situaties waarin een complete <div> er over de mooiste oplossing is, denk ik.

---

Om toch nog even in te gaan op de TS. Zit de <table> nu in beide <div>s? Zo zou je een heel eind moeten komen:

HTML:

<style>
.container { position: relative; width: 600px; }
.gray { position: absolute; background: rgba(0,0,0,0.5); width: 600px; height: 600px; }
</style>
<div class="container">
<div class="gray"></div>
<table>
   <tr> ...

[ Voor 47% gewijzigd door OkkE op 11-11-2010 13:42 ]

[Erwin_Br]

De div is semi-transparant, het is dus niet zo dat er een groot wit vlak ergens overheen gaat. Ik denk dat het er qua stijl dus best goed uit kan zien.

Het belang om velden te disabelen is reusability. Ik wil geen woud aan formulieren creeeren waar bepaalde velden wel of niet bestaan. Gewoon 1 formulier dat op basis van een status bepaalde onderdelen enabled of disabled heeft. Voor onderhoud ("oeps, we willen er achteraf een extra veld bij") is dat veel makkelijker.

Het begint erop te lijken dat ik inderdaad met JavaScript alle controls langs moet gaan om ze te disabelen. Dat belooft niet veel goeds, ben ik bang...

[Bosmonster]

Dus nu gaat het om onderdelen van het formulier ipv het hele formulier?

Als je onderdelen wilt disablen lijkt het met logisch dat je die onderdelen langs moet

Overigens zou ik op basis van je laatste post juist weer zeggen om ze gewoon onzichtbaar te maken ipv er iets overheen te leggen. Dus het wordt er niet veel duidelijker op...

[ Voor 35% gewijzigd door Bosmonster op 11-11-2010 13:52 ]

[Erwin_Br]

Bosmonster schreef op donderdag 11 november 2010 @ 13:51:
Dus nu gaat het om onderdelen van het formulier ipv het hele formulier?

Als je onderdelen wilt disablen lijkt het met logisch dat je die onderdelen langs moet

Overigens zou ik op basis van je laatste post juist weer zeggen om ze gewoon onzichtbaar te maken ipv er iets overheen te leggen. Dus het wordt er niet veel duidelijker op...

Het formulier bestaat uit categorieen (onderdelen) die in een eigen table staan. Dus nee, geen individuele controls, maar verzamelingen.

Vanuit een usability oogpunt is het disablen van onderdelen juist veel vriendelijker dan weglaten. Gebruikers weten dan veel sneller waar ze de velden kunnen vinden omdat elk formulier er hetzelfde uitziet, maar per status bepaalde onderdelen aan/uit staan. Maar goed, dat is een andere discussie.

EDIT: Thanks, Okke! Je laatste voorbeeld werkt prima! Ik denk dat ik er te lang op heb zitten staren, want je voorbeeld zit gewoon logisch in elkaar. Nogmaals dank!

[ Voor 8% gewijzigd door Erwin_Br op 11-11-2010 13:58 ]

[mcDavid]

Erwin_Br schreef op donderdag 11 november 2010 @ 13:56:
[...]


Het formulier bestaat uit categorieen (onderdelen) die in een eigen table staan. Dus nee, geen individuele controls, maar verzamelingen.

Vanuit een usability oogpunt is het disablen van onderdelen juist veel vriendelijker dan weglaten. Gebruikers weten dan veel sneller waar ze de velden kunnen vinden omdat elk formulier er hetzelfde uitziet, maar per status bepaalde onderdelen aan/uit staan. Maar goed, dat is een andere discussie.

EDIT: Thanks, Okke! Je laatste voorbeeld werkt prima! Ik denk dat ik er te lang op heb zitten staren, want je voorbeeld zit gewoon logisch in elkaar. Nogmaals dank!

Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?

De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.

[ Voor 13% gewijzigd door mcDavid op 11-11-2010 15:41 ]

[OkkE]

mcDavid schreef op donderdag 11 november 2010 @ 15:38:
[...]


Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?

De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.

Mijn oplossing is dan ook niet echt een oplossing denk ik. Zou het zelf iedergeval anders oplossen (bijv. via JS de inputs zelf disablen inderdaad). Mijn "oplossing" is inderdaad niet cross-browser getest (icm waarschijnlijk quirksmode); maar het geeft wel aan waarom de TS zijn code niet werkte.

[Verwijderd]

Hou je er rekening mee dat velden die op deze manier disabled zijn gewoon met het toetsenbord toegankelijk blijven en wel gewoon worden meegesubmit, i.t.t. inputs die echt disabled zijn?

[BCC]

Inderdaad. Het zou logischer zijn om ze dan hidden te maken. Naja, eigenlijk zou het logischer zijn om ze gewoon niet te renderen.

[ Voor 36% gewijzigd door BCC op 12-11-2010 10:06 ]

[moozzuzz]

Staan de gegevens in aparte tabllen

code:

<table 1 id="enkel tonen in geval 1">

<table 2 id="enkel tonen in geval 2">

<table 3 id="enkel tonen in geval 3">

dan kan je wellicht de opacity van tabel 1,2,3 met javascript regelen (even CSS die ik bedoel)

HTML:

<!-- pseudo test code -->
<html>
<body style="background: blue;">

<table style="opacity:0.4;filter:alpha(opacity=40); background: red; width: 400; height: 400px;"><tr><td>

<form><input style="background: green;"></form>

</td></tr></table>
</body>
</html>

[Erwin_Br]

mcDavid schreef op donderdag 11 november 2010 @ 15:38:
[...]


Als je gewoon je fieldsets een ID geeft, dan kun je met Javascript toch heel gemakkelijk alle inputs in die fieldset tegelijk disablen?

Kon ik maar een id meegeven. Sharepoint zit in de weg...

De oplossing van Okke werkt trouwens alleen als alle fieldsets dezelfde grootte (in dit geval 600x600 px) hebben. En dan nog zou ik het goed testen in verschillende browsers, want vooral IE heeft nogal de neiging om inputs overal overheen te gooien, ongeacht z-index.

Gelukkig gaat het om een corporate intranet oplossing binnen een gestandaardiseerde omgeving. Alleen IE 7. Ik heb bovenstaande oplossing overigens wel in meerdere browsers getest (behalve IE 6), en het werkt prima. De hoogte van de div is geen probleem, want de wrapper div heeft als instelling overflow:hidden waardoor de overbodige pixels verdwijnen. Ik neem dus een ruime marge om zeker te zijn dat alles wordt gecoverd.

[Erwin_Br]

BCC schreef op vrijdag 12 november 2010 @ 10:05:
Inderdaad. Het zou logischer zijn om ze dan hidden te maken. Naja, eigenlijk zou het logischer zijn om ze gewoon niet te renderen.

De informatie uit de disabled fields moet zichtbaar zijn, is van belang voor het invullen van de andere velden, dus verbergen/niet renderen is geen optie.

[Erwin_Br]

moozzuzz schreef op vrijdag 12 november 2010 @ 11:45:
Staan de gegevens in aparte tabllen

code:

<table 1 id="enkel tonen in geval 1">

<table 2 id="enkel tonen in geval 2">

<table 3 id="enkel tonen in geval 3">

dan kan je wellicht de opacity van tabel 1,2,3 met javascript regelen (even CSS die ik bedoel)

HTML:

<!-- pseudo test code -->
<html>
<body style="background: blue;">

<table style="opacity:0.4;filter:alpha(opacity=40); background: red; width: 400; height: 400px;"><tr><td>

<form><input style="background: green;"></form>

</td></tr></table>
</body>
</html>

Klopt, dit werkt ook. Ik heb gekozen voor de div omdat je daarmee de velden ook afschermt. Geen waterdichte afscherming weliswaar, maar dat is geen punt gezien de aard van de informatie en de business requirements.

[RobIII]

Gebruik de edit knop ( ) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig.