PDA

View Full Version : [OPEN-395] Float Style Causes HTML to Fail on Button



darrenb
5 Oct 2010, 6:56 AM
Hi,
I'm setting up a button...



var button = new Ext.Button(
{ ui: 'normal',
html: '<div style=\'float:left;\'>Director</div><div style=\'float:right;\'>></div>'
});


So, this creates a button with the text 'Director' to the left and '>' to the right.

When I include a float in the div, it doesn't display the associated div's contents. Remove the left float and it shows 'Director', remove the right float and it shows the '>'. The odd thing is, according to Chrome's Element Inspector, that the text 'Director' appears in the DOM when the float is set.

This issue happens with 0.9.5 and 0.9.6, but it works ok with 0.9.3 (I've not tried 0.9.4).

Thanks,
Darren.

BrendanC
5 Oct 2010, 10:03 AM
Thanks for the bug report.

davidkaneda
28 Oct 2010, 7:07 PM
Are you character encoding the > symbol? It could be screwing up your HTML... Are you still seeing the problem in .98? Thanks-

darrenb
1 Nov 2010, 1:48 AM
Hi,
I've just upgraded to .98 and tried using the &gt encoding in place of the '>' and I still get the same issue whereby including the left float in the first div makes the word 'director' disappear and if i include the right float in the second div the '>' or &gt disappear.

Thanks,
Darren.

Animal
1 Nov 2010, 4:02 AM
Use CSS.

Drop this into examples/<anywhere>

It renders a full-width button layed out as you want.



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../../ext-touch.js"></script>
<style type="text/css">
.x-button.arrow-button .x-button-label {
text-align: left;
}
.x-button.arrow-button:after {
content: '>';
}
</style>
<script type="text/javascript">
Ext.setup({
onReady: function() {
Ext.getBody().update('');
new Ext.Button({
cls: 'arrow-button',
text: 'Director',
renderTo: document.body
});
}
});
</script>
</head>
<body></body>
</html>