Removing the Space around my extension Button

[agnie_john]

Hi,

I am creating a button as extension to do some specific task.

I have created the button and implement the fuction what i needed.

But i would like to remove the space around ny button.

i used the below css for my button 

.qv-copy-btn {
cursor: pointer;
display:flex;
align-items: center;
justify-content: center;
font-size-adjust:0.5;
width:100%;
height:100%;
text-decoration: none;
font-family: Raleway, Arial, sans-serif;
color: #fff;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
vertical-align: top;
border:none!important;
}

but the space around my button remain exists.

i want to implement the button same as default button in qliksense

can anybody give me the solution for my issue?

Thanks,

John.

[_datadude]

Hi @agnie_john ,

reading your post, I have two ideas in my mind:

1. You could assign to your margin an "!important", like

margin-top: 0 !important;

....
or simple
margin:0 !important;
This should give your rule more weight than other rules that are also considered "valid".

On the other hand, I would like to point you to https://qlik-oss.github.io/leonardo-ui/button.html . 

If you really want to have a "Qlik sense look alike" button, this should be the easier option, I think.

Best,
Markus

[vasilev]

Hi @agnie_john, I have the same issue. Have the solution from @_datadude worked for you? Unfortunatelly I have no success with that.

BR,

Rumen

[BPiotrowski]

Hi @agnie_john 

I would need to see the html build but what I can suggest is clearing margins of parents not of button cuz button is full size here

try smth like

!div .qv-copy-btn {
margin: 0 !important;
}

or

div:has(.qv-copy-btn ){
margin: 0 !important;
}

or !div div .qv-copy-btn {}

or so the margin is set by parent here

[vasilev]

I have implemented this styling and it work for me.

.qv-object-SSyGQV .qv-inner-object.no-titles {
padding: 0 !important;
}

#SSyGQV_title {
height: 0px !important;
}

SSyGQV ist the id of my object.

BR,

Rumen