Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

Reply
VivekChadha
Frequent Visitor

Custom Visual- CSS is not getting applied to the visual from the visual.less

---visual.less---

@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";
.mainContainer{
width: 1130px !important;
height: 600px;
display: flex;
flex-direction: column;
.bones{
  flex-basis: 50%;
  .ribCage{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .rib{
      flex-wrap: nowrap;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      .connector{
        border-left: 2px solid rebeccapurple;
        align-self: stretch;
        flex-grow: 1;
        margin-left: 50%;
      }
      .boneEnd{
        height: 65px!important;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0 1px;
        position:relative;
        font-size: 12px;
        text-align: left;

        >a.moveUp:hover{
          transform: translateY(-10px);
        }
        >a.moveDown:hover{
          transform: translateY(10px);
        }
        >div{
          width: max-content;
          position: absolute;
          max-width: 150%;
          top: 0;
          bottom: 0;
          border: 1px dashed;
          text-decoration: unset;
          color: unset;
          transition: transform 0.2s;
          >section{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            padding-left: 3px;
            .singleLineName{
              overflow-x: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: left;
            }
            .doubleLineName{
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            >div{
              flex-grow: 2;
              max-width: 100%;
            }
            >caption{
              flex-grow: 1;
              max-width: 100%;
              overflow-x: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-weight: 600;
              text-align: left;
              padding-bottom: 3px;
              padding-top: 2px;
              min-width: 120px;
            }
            >.tag{
              overflow: hidden;
              white-space:nowrap;
              text-overflow:ellipsis;
            }
          }



          >i{
            position: absolute;
            top: -15px;
            right: -14px;
            font-size: 30px;
            background: white;
          }
         
        }
      }
    }
  }
}
>.spine{
  flex-basis: 5px;
  border-radius: 5px;
  flex-shrink: 0;
  flex-grow: 0;
  background-color: #02203E;
}
}

.finalBlock{
width: 70px;
height: 70px;
align-self: flex-end;
background: #D9EC27;
border-radius: 50%;
text-align: center;
line-height: 70px;
font-weight: 600;
}

.date_line{
text-decoration: underline;
}

.border_right{
margin-top: 10px;
margin-bottom: 10px;
}

.fix_padding{
margin-left: 0px !important;
margin-right: 0px !important;
}

.no_padding{
padding-left: 0px !important;
padding-right: 0px !important;
}

.no_border{
height: 140px;
margin-top: 10px;
}

.finalBlockText{
font-size: 12px;
margin-right: 5px;
padding-top: 35px;
text-align: right;
}
.fishBoneEditor{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #e5e5e5;
>div{
  flex-basis: 25%;
  padding: 10px;
  >div{
    display: inherit;
    >i{
      font-size: 16px;
      margin-left: 5px;
    }
  }
}
}

.customer_title{
font-size: 24px;
font-weight: bold;
padding-top: 0px;
display: block;
margin-bottom: 10px;
}

.oppurtunity_title{
padding-bottom: 15px;
font-size: 16px;
font-weight: bold;
color: #9A50F8;
padding-top: 0px;
display: block;
}

.dropdownContainer{
margin-top: 10px;
}


.midway_link, .midway_link:hover{
color: black;
text-decoration: none;
}
 
----HTML from component.tsx---
render() {
  
        return (
         
<div id="deleteme" style={{ overflow: "auto" }}>
              <div
                className="mainContainer"
                style={{ marginLeft: 1 + "%" }}
              >
                <div className="bones">
                  <div className="ribCage" style={{ alignItems: "end" }}>
                    {FishboneDiagramComponent.topBones.map((element) => {
                      return <>{this.renderTopBone(element)}</>;
                    })}
                  </div>
                </div>
                <div
                  style={{ width: this.calcTimelineWidth() + "px" }}
                  className="spine"
                ></div>
                <div className="bones">
                  <div
                    className="ribCage"
                    style={{
                      alignItems: "start",
                      position: "relative",
                      left: this.calulateBottomBonePadding(),
                    }}
                  >
                    {FishboneDiagramComponent.bottomBones.map((element, index) => {
                      return <>{this.renderBottomBone(element)}</>;
                    })}
                  </div>
                </div>
              </div>
            </div>


        );
    }
 
1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @VivekChadha,

Are you importing visual.less in your visual.ts or any other file that's part of your build path? If this is not referenced, then webpack will not include it in the package that gets served to the developer visual.

If you have done this, you can also check the visual.css file hosted at https://localhost:8080/assets/ to confirm that the contents have been included in the build, e.g.:

dmp_0-1662507074294.png

The other possibility is that if you're importing bootstrap via less, it can sometimes not compile. If so, import bootstrap.css in your visual.ts (I usually place it underneath the visual.less import).

Hopefully this gives you a couple of avenues to try.

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

1 REPLY 1
dm-p
Super User
Super User

Hi @VivekChadha,

Are you importing visual.less in your visual.ts or any other file that's part of your build path? If this is not referenced, then webpack will not include it in the package that gets served to the developer visual.

If you have done this, you can also check the visual.css file hosted at https://localhost:8080/assets/ to confirm that the contents have been included in the build, e.g.:

dmp_0-1662507074294.png

The other possibility is that if you're importing bootstrap via less, it can sometimes not compile. If so, import bootstrap.css in your visual.ts (I usually place it underneath the visual.less import).

Hopefully this gives you a couple of avenues to try.

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.