Ändern von Platz und Breite in Chrome und Safari

Ich habe diese Tabelle, die einige Daten hat (input & select etc ...), Wenn keine Option ausgewählt ist, ist der Abstand in allen Browsern korrekt, aber wenn ich auf die klicken select der Abstand wird nur in Safari und Chrome geändert, aber es wird nicht in Firefox ändern.Ändern von Platz und Breite in Chrome und Safari

Chrome VOR Select

Chrome nach einem Klick auf Select

Firefox VOR & Nach einem Klick auf 012.313 auf klicken

I enthalten keinen Code, weil es in Firefox funktioniert gut, und ich dachte, vielleicht ist es einige CSS-Problem ist Browser in Bezug auf die ich in meinem styles setzen sollte, aber wenn nötig Ich werde meinen auch setzen Codes.

UPDATE

Ich habe auch die Codes: Working jsFiddle

.rTableCell, 
 
.rTableHead { 
 
    xfloat: left; 
 
    height: 36px; 
 
    overflow: hidden; 
 
    padding: 3px 3%; 
 
    width: 150px; 
 
    vertical-align: middle; 
 
    line-height: 120%; 
 
    display: table-cell; 
 
} 
 
.rTableCellId { 
 
    width: 52px; 
 
} 
 
.rTableCellVal { 
 
    width: 90px; 
 
    vertical-align: middle; 
 
}

<div class="rTable"> 
 
    <div class="rTableRow" style="color:#797979"> 
 
    <div class="rTableCell rTableCellId ndLabel">835</div> 
 
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div> 
 
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div> 
 

 
    <div class="rTableCell rTableCellSrc ndLabel">GA</div> 
 

 
    <div class="rTableCell rTableCellUrlLoc" style="width:180px"> 
 
     <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" /> 
 
    </div> 
 
    <div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal"> 
 
     <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%"> 
 
     <option value="">--- Select1 ---</option> 
 
     <option value="">--- Select2 ---</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <br /> 
 
</div>

Quelle

2016-04-07 reshad

Offenbar die mit der abgezweigten wählen ist breiter als wenn die Auswahl unten nicht fallen gelassen wird. Ich bin mir nicht sicher, was zu tun ist, außer, als Workaround, um sicherzustellen, dass die Auswahl selbst so breit ist wie der Inhalt von Iots breiteste Option. –

@MrLister Ich änderte auch die Länge der Optionen, aber es hat immer noch dieses Problem. – reshad

Hm. Ein weiteres Problem scheint zu sein, dass die Breite nicht zum Original zurückschnappt, nachdem Sie die Auswahl geschlossen haben. Nicht sicher, ob es irgendwelche Lösungen gibt. –

Eine Möglichkeit ist, die Auswahl des enthält div position:relative; zu setzen, und die wählen sich position: absolute; Das nimmt es aus dem Fluss und verhindert so die Größenänderung von Elemen nts.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.rTableCell, 
.rTableHead { 
    xfloat: left; 
    height: 36px; 
    overflow: hidden; 
    padding: 3px 3%; 
    width: 150px; 
    vertical-align: middle; 
    line-height: 120%; 
    display: table-cell; 
} 

.rTableCellId { 
    width: 52px; 
} 

.rTableCellVal { 
    width: 90px; 
    vertical-align: middle; 
} 

.rTableCell {position: relative;} 
.rTableCell select {position: absolute; left: 20px; top: 12px;} 


</style> 
</head> 
<body> 

<div class="rTable"> 
    <div class="rTableRow" style="color:#797979"> 
    <div class="rTableCell rTableCellId ndLabel">835</div> 
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div> 
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div> 

    <div class="rTableCell rTableCellSrc ndLabel">GA</div> 

    <div class="rTableCell rTableCellUrlLoc" style="width:180px"> 
     <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" /> 
    </div> 
    <div style="margin-top:7px; width: 150px; " class="rTableCell rTableCellVal"> 
     <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" > 
     <option value="">--- Select1 ---</option> 
     <option value="">--- Select2 ---</option> 
     </select> 
    </div> 
    </div> 
    <br /> 
</div> 

</body> 
</html>

Quelle

2016-04-07 10:54:54

Gut, es hat geholfen, lass mich sehen, wie es im Projekt aussieht. – reshad

Ah, dieses ist eleganter als meins, da es kein JavaScript benötigt. –

Zugegeben, die Positionierung wird ein Problem und wird ein wenig unordentlich, aber das kann überwunden werden. –

Ein bisschen hackish, aber wenn Sie ein wenig JavaScript verwenden nicht dagegen sind, können Sie die Auswahl auf Last fallen nach unten und es sofort wieder nach oben schließen.

window.onload=function(){ 
 
    var sel = document.getElementById('campaignGoalId'); 
 
    sel.size=sel.options.length; 
 
    sel.size = 1; 
 
}

.rTableCell, 
 
.rTableHead { 
 
    xfloat: left; 
 
    height: 36px; 
 
    overflow: hidden; 
 
    padding: 3px 3%; 
 
    width: 150px; 
 
    vertical-align: middle; 
 
    line-height: 120%; 
 
    display: table-cell; 
 
} 
 

 
.rTableCellId { 
 
    width: 52px; 
 
} 
 

 
.rTableCellVal { 
 
    width: 90px; 
 
    vertical-align: middle; 
 
}

<div class="rTable"> 
 
    <div class="rTableRow" style="color:#797979"> 
 
    <div class="rTableCell rTableCellId ndLabel">835</div> 
 
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div> 
 
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div> 
 

 
    <div class="rTableCell rTableCellSrc ndLabel">GA</div> 
 

 
    <div class="rTableCell rTableCellUrlLoc" style="width:180px"> 
 
     <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" /> 
 
    </div> 
 
    <div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal"> 
 
     <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%"> 
 
     <option value="">--- Select1 ---</option> 
 
     <option value="">--- Select2 ---</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-04-07 10:59:37

Ändern von Platz und Breite in Chrome und Safari

Antwort

Verwandte Themen