web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : 2cPgENFiyqIQCtbwV/MmCl
Power Apps - Power Apps Pro Dev & ISV
Unanswered

Field / Attribute label issue when CSS style within PCF component contains float:left

Like (0) ShareShare
ReportReport
Posted on 16 Jan 2020 16:23:14 by 1,400

As above I've got an issue where the field / attribute name label floats to the bottom of the field rather than the top when I use float: left within the css of the component.

 

Any idea what the cause is or even better how to fix it - as I've spent 3 hours trying to fix it so far without any success.

 

css issue.png

  • Ben Thompson Profile Picture
    1,400 on 22 Jan 2020 at 20:01:00
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    @jolake just sent you a PM with a onedrive link to a solution with the control.

     

    Thanks,

     

    Ben

  • jolake Profile Picture
    on 22 Jan 2020 at 19:04:32
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    Hi Ben,

    If you could provide source for this control it would be helpful as I am not able to reproduce this label issue on an oob control.

    Thanks,

    -John

  • Ben Thompson Profile Picture
    1,400 on 22 Jan 2020 at 14:19:29
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    The Template label is outside the PCF control as it's the label on the form for the field and any css I apply to it would be by overriding / enhancing built-in styles that would probably cause issues elsewhere on the page. 

     

    To be honest I only mentioned it here as I thought it would be quicker to get it reported and investigated here as the product team reads this rather than by raising a support ticket.

     

    I'm happy to provide the source code if required.

  • BenediktB Profile Picture
    50 on 22 Jan 2020 at 14:05:14
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    Yeah, CSS is annoying some times.

     

    So you need the float:left even when the second tag is not present?

     

    Could you maybe apply a "fixing" CSS to the label?

  • Ben Thompson Profile Picture
    1,400 on 22 Jan 2020 at 13:30:36
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    The float:left is within a css class of a span nested within 2 other div's.

     

    There is a second (toolbox) div, that sits next to the span, that also has a float:left within it's styling  that only appears when the field is in focus. 

     

    So yes there are wrapping divs around the control where additional styling could be added if I could work out how to fix it and adding more div elements wouldn't be a problem.

     

    The issue is that I do need to use float:left as without that attribute, the height attribute within the span is overridden and that causes a different set of issues.

     

    It wouldn't be so bad but I've been playing with CSS for over 20 years and it's still (as in this example) an annoying pain at times.

     

     

  • BenediktB Profile Picture
    50 on 22 Jan 2020 at 11:40:57
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    Hej @ben-thompson,

    how does your HTML & CSS look like. Do you need the float only inside of your component or to align it in relation to the whole MDA?

     

    I usually scope my CSS with a wrapping div that has a special CSS class. Then the CSS only effects my component.

     

    //Benedikt

  • v-monli-msft Profile Picture
    on 21 Jan 2020 at 09:44:15
    Re: Field / Attribute label issue when CSS style within PCF component contains float:left

    Hi @ben-thompson ,

     

    Please try to raise a support ticket.

     

    Regards,

    Mona

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 791 Most Valuable Professional

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 410 Super User 2025 Season 2

#3
mmbr1606 Profile Picture

mmbr1606 275 Super User 2025 Season 2

Loading complete