Your code is working fine. However if you have containter element like div or panel then ensure that you have provided enough width to the container control as well.
the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.
your code is working fine but , here is need to one element which contains all the other element like as container so you can take a div and give inline style to fix a width or just copy paste your code in that div its working fine.
Contributor
2344 Points
2313 Posts
float left & float right within a <label> ignored
Nov 25, 2016 05:12 PM|wavemaster|LINK
I have a currency symbol and money value within a label
<label><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0:###}", @billingRate)</span></label>Hoping to get:
$ 10
$ 100
$ 1000
Instead I get:
$1
$100
$1000
Why is the float ignored?
All-Star
50491 Points
9789 Posts
Re: float left & float right within a <label> ignored
Nov 25, 2016 08:40 PM|A2H|LINK
Your code is working fine. However if you have containter element like div or panel then ensure that you have provided enough width to the container control as well.
Aje
My Blog | Dotnet Funda
Contributor
2344 Points
2313 Posts
Re: float left & float right within a <label> ignored
Nov 26, 2016 03:18 AM|wavemaster|LINK
The container is a bootstrap col 3, there should be plenty of space.
@foreach (var sname in shotsannual1) { <div class="row"> <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1"> @if (oldservices.Contains(@sname.id)) { <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" checked="checked" style="margin-right: 6px;margin-top: 15px;" /> } else { <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" style="margin-right: 6px;margin-top: 15px;" /> } </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <label for="@sname.id" style="margin-top: 15px; color:darkgray;"><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0,20:#,##0}", sname.billingRate)</span></label> </div> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"> <label for="@sname.id" style="margin-top: 15px; margin-right: 6px; color:darkgray;">@sname.Service.ServiceName (@sname.Service.shortForm)</label> </div> </div> }All-Star
15176 Points
3888 Posts
Re: float left & float right within a <label> ignored
Nov 26, 2016 06:06 AM|raju dasa|LINK
Hi,
You may find multiple solutions here: http://stackoverflow.com/questions/17938303/how-to-float-a-span-in-a-div
you may need to apply block rule and add clear fix at end.
rajudasa.blogspot.com || rajudasa-tech
All-Star
49804 Points
11625 Posts
Re: float left & float right within a <label> ignored
Nov 27, 2016 12:09 AM|bruce (sqlwork.com)|LINK
the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.
Contributor
2344 Points
2313 Posts
Re: float left & float right within a <label> ignored
Nov 27, 2016 01:19 AM|wavemaster|LINK
@bruce
What is the approach then to get
a check box
$ left align / value right align
an area for text?
Star
8291 Points
2492 Posts
Re: float left & float right within a <label> ignored
Dec 06, 2016 09:23 AM|Brando ZWZ|LINK
Hi wavemaster,
As bruce says, you could set the lable css style's display property to 'block', then the folat property will be worked well.
More details, you could refer to follow codes and image:
<div class="row"> <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1"> <input type="checkbox" id="aaa" name="shots" value="aaa" checked="checked" style="margin-right: 6px; margin-top: 15px;" /> <input type="checkbox" id="bbb" name="shots" value="bbb" style="margin-right: 6px; margin-top: 15px;" /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <label for="aaaa" style="margin-top: 15px; display:block; color: darkgray;"><span style="float: left;">$</span> <span style="float: right;">100</span></label> </div> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"> <label for="bbbb" style="margin-top: 15px; display:block; margin-right: 6px; color: darkgray;">aaaaaaaaaaaaaaaaaa</label> </div> </div>Result:
Best Regards,
Brando
Contributor
2344 Points
2313 Posts
Re: float left & float right within a <label> ignored
Dec 08, 2016 02:57 AM|wavemaster|LINK
Thanks all!
Looking sweet.
None
0 Points
1 Post
Re: float left & float right within a <label> ignored
Dec 08, 2016 06:53 AM|punitpatel12|LINK
your code is working fine but , here is need to one element which contains all the other element like as container so you can take a div and give inline style to fix a width or just copy paste your code in that div its working fine.
https://jsfiddle.net/bft50r7d/2/
<div style="width:50px;">
<label >
<span style="float:left;">$</span>
<span style="float:right;">10</span>
</label>
</div>
iFour Technolab Pvt. Ltd.
http://www.ifourtechnolab.com