cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Impactful Individual
Impactful Individual

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

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

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
7 REPLIES 7
Highlighted
Community Support
Community Support

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

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Frequent Visitor

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

Highlighted
Impactful Individual
Impactful Individual

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.

 

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
Highlighted
Frequent Visitor

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?

Highlighted
Impactful Individual
Impactful Individual

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
Highlighted
Power Apps
Power Apps

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

Highlighted
Impactful Individual
Impactful Individual

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

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

Helpful resources

Announcements
Check this Out

Announcing

Class of 2020- Season 2

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (8,673)