HTML vervangen in een webpagina

[SinergyX]

Kleine intro, wij gebruiken op het werk al aantal jaren een website/service voor het berekenen van een aantal waarden, lange tijd met grote tevredenheid.

Eerder dit jaar hebben ze de site een 'overhaul' gegeven om het meer 'responsive' te maken, lees hier vooral mooier en moderner, maar absoluut niet functioneler.

Ons geval is het gewoon 1 groot tabel van 10-20 regels met op elke regel 15-20 kolommen. Deze vullen we allemaal in, klikken submit en er komt een mooi overzicht uit.

Na een aantal maanden contact te hebben gehad met de ontwikkelaar, kwam het langzaam tot een punt dat wij de 'uitzondering' waren en met 20+ waarden per regel werken, waar de rest max 5-10 velden gebruikt. Dit was in het oude design geen probleem, deze gebruikte 100% van de breedte van je browser, was je resolutie hoog genoeg, paste dit altijd.

Bij het nieuwe design zijn ze met max breedte gaan werken, ergens rond de 1200px, links/rechts is nu lege/loze ruimte, wat gebeurd er dus? Wij krijgen een scrollbalk om naar waarden 10-20 te gaan, zoals ook met code-tag op het forum:

code:

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure. Rich four like real yet west get. Felicity in dwelling to drawings. His pleasure new steepest for reserved formerly disposed jennings

Scrollbalk om de rest te zien, wij moeten nu dus continue van links naar rechts slepen om waarden in te vullen (op de juiste regel).

Mijn simpele oplossing was het invulveld te verlagen van een <input> size=10 naar size=4, waardoor ik dus ruim 2x zoveel in dezelfde breedte kan plaatsen en aangezien het 99% gaat om waarde tot max 999 (3 cijfers) zou dit geen probleem moeten geven. Maar ze gaan hierin niet mee, er zijn anderen die wel 5+ cijfers gebruiken en ze gaan geen 'client custom' spul maken.

Nu ik dus niet echt verder kom met de ontwikkelaars (of we moeten compleet eigen systeem ontwikkelen, wat onnodig prijzig is), ben ik op zoek gegaan naar een html-vervanger. Binnen IE en Chrome kan ik wel per 'object' wat aanpassen, maar blijkbaar niet op de hele pagina (gaat hier dus om tot ~400 inputs).

Online heb ik nu aantal 'search & replace' gevonden, maar die lijken enkel zichtbare tekst te kunnen vervangen, mij gaat het dus om html code zelf (size) of ik vind proxy's die HTML vervangen, wat ik beetje overkill vind voor wat ik wil.

Is wat ik zoek wel beschikbaar? Of wordt het toch laatste poging dit via de ontwikkelaars te zien op te lossen?

Edit, Chrome extensie Search en Replace werkt wel (vinkje reg.expression), maar moeten we de tekst steeds opnieuw ingeven. Ik las wel over het maken van eigen extensies, maar deze moet je ook laten goedkeuren voor de Chrome store, beetje omslachtig voor iets wat alleen wij gebruiken.

[ Voor 5% gewijzigd door SinergyX op 31-10-2016 13:07 ]

[m3gA]

Kun je niks doen met Greasemonkey?

[DJMaze]

Je kan een custom CSS forceren zoiets als

Cascading Stylesheet:

#IDVANTABEL input[type=number] { max-width: 3em; }

.CLASSVANTABEL input[type=number] { max-width: 3em; }

Moeten ze wel <input type="number"> gebruiken. Anders is het ouderwets

Daarnaast gebruik ik ook vaak een ".fullscreen" optie in mijn CSS.
Als iets die class mee krijgt neemt hij het volledige scherm en niet fixed op 1200px.
Iets als:

Cascading Stylesheet:

.fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

[ Voor 63% gewijzigd door DJMaze op 31-10-2016 13:13 ]

[Room42]

Inderdaad wil je niet de HTML aanpassen, waarschijnlijk (post anders wat voorbeeldcode!), maar een CSS toepassen. Daar zijn verschillende extensies voor of, als je toegang hebt tot de webserver, zou je de CSS van de site zelf kunnen aanpassen.

Maar goed, wat voorbeeldcode zou helpen

[Compizfox]

Gewoon een userscript (Greasemonkey of Stylish) gebruiken om custom CSS toe te passen. Dan kun je de pagina gewoon je hele scherm laten gebruiken ipv 1200px.

[SinergyX]

Excuses, ik zat nog flink CSS door te spitten of daar iets stond over die <input>, maar mijn CSS kennis niet bijster goed. Ik had via DOM editor/verkenner al wat gespeeld met de paginabreedte, maar daar kwam ik niet zo 123 uit.

Voorbeeld uit HTML code:
<input name="Val1" id="ID4" type="text" size="7" maxlength="7" value="">

[Spinal]

Heeft de tabel een class of id? Dan kun je die targeten en op 100% oid zetten, ipv de inputs

[Room42]

SinergyX schreef op maandag 31 oktober 2016 @ 13:23:
[...]

Voorbeeld uit HTML code:
<input name="Val1" id="ID4" type="text" size="7" maxlength="7" value="">

Graag iets meer context Als we meer elementen om deze inputs heen hebben, is de kans groter dat er een directe selector te bouwen is.

[SinergyX]

Room42 schreef op maandag 31 oktober 2016 @ 13:48:
[...]

Graag iets meer context Als we meer elementen om deze inputs heen hebben, is de kans groter dat er een directe selector te bouwen is.

code:

<table class="width-100 table-bordered table-striped table-mobile">
<tr class="odd">
<td data-label="Ruimte V3z">
<input name="StatcalcList[0].cumulativeStatistics[2].statTypeValueString" id="form_StatcalcList_0__cumulativeStatistics_2__statTypeValueString" type="text" size="7" maxlength="7" value=""></td>
<td data-label="Ruimte R4o">
<input name="StatcalcList[1].cumulativeStatistics[1].statTypeValueString" id="form_StatcalcList_1__cumulativeStatistics_1__statTypeValueString" type="text" size="7" maxlength="7" value=""></td>

Hierna blijft dit doorgaan, tot </tr> en begint weer opnieuw, volgende regel.

Compizfox schreef op maandag 31 oktober 2016 @ 13:12:
Gewoon een userscript (Greasemonkey of Stylish) gebruiken om custom CSS toe te passen. Dan kun je de pagina gewoon je hele scherm laten gebruiken ipv 1200px.

Deze heb ik inmiddels kunnen vinden, er staan een 6 tal <divs> onder elkaar, 1 ervan
<div class="wrapper">

Met CSS:
.wrapper{max-width:1244px;padding:0 10px;margin:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

Als ik deze uitschakel, ga ik inderdaad volledige breedte van het scherm (en dus ook gewoon om 20 kolommen weer te geven).

Deze kan ik blijkbaar wel direct toepassen op een site (die search & replace moet ik elke keer handmatig), dat lijkt een betere oplossing.

[DJMaze]

Net wat ik dacht, dat is oudbollige HTML (<tr class="odd"> en type="text" verraad de boel).

Cascading Stylesheet:

input[size="7"] {
    max-width: 3em;
}

// dan
table.width-100.table-bordered.table-striped.table-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
// of
.wrapper {
    max-width:auto !important;
}

[ Voor 14% gewijzigd door DJMaze op 31-10-2016 14:54 ]

[SinergyX]

DJMaze schreef op maandag 31 oktober 2016 @ 14:52:
Net wat ik dacht, dat is oudbollige HTML (<tr class="odd"> en type="text" verraad de boel).

Cascading Stylesheet:

input[size="7"] {
    max-width: 3em;
}

// dan
table.width-100.table-bordered.table-striped.table-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
// of
.wrapper {
    max-width:auto !important;
}

Helemaal top, daarmee heb ik ze meteen allebei