Styjun

A+ rating still unsecure by Google Chrome's opinion

Why are electric shavers specifically permitted under FAR §91.21

Why does Japan use the same type of AC power outlet as the US?

What is the question mark?

rule-based element selection from a matrix

Is the Microsoft recommendation to use C# properties applicable to game development?

If a person claims to know anything could it be disproven by saying 'prove that we are not in a simulation'?

Visa on arrival to exit airport in Russia

What is the opposite of "hunger level"?

How would armour (and combat) change if the fighter didn't need to actually wear it?

What is the fastest way to level past 95 in Diablo II?

Why do we use low resistance cables to minimize power losses?

Is Thieves' Cant a language?

A Magic Diamond

Why does auto deduce this variable as double and not float?

Doesn't the speed of light limit imply the same electron can be annihilated twice?

Build a mob of suspiciously happy lenny faces ( ͡° ͜ʖ ͡°)

Bringing Power Supplies on Plane?

How does the Moon's gravity affect Earth's oceans despite Earth's stronger gravitational pull?

What should I do if actually I found a serious flaw in someone's PhD thesis and an article derived from that PhD thesis?

What are these panels underneath the wing root of a A380?

Why don't modern jet engines use forced exhaust mixing?

Good way to stop electrolyte tabs from turning into powder?

What's a good pattern to calculate a variable only when it is used the first time?

Override height attribute and disable it

Make a div fill the height of the remaining screen spaceCSS 100% height with padding/marginHow to disable text selection highlightingDisabled Buttons in CSS?How to make a div 100% height of the browser windowHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?permanent 2x3 CSS image galleryBehavior of attribute selectorCSS position:fixed is working for the header but not for the footer

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have style that looks like this

.label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

But it slightly breaks the markup in some places due to height attribute. If I disable height property (do it in browser) it displays label just fine.

I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute.

How to achieve that?

css

share|improve this question

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  apply height: unset;. It sets the height back to it inherited value or if that is not available to the initial value.
  
  – Mark Baijens
  Mar 27 at 12:26
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You mean you want to keep the height on .label-bold-pre-wrap, because that class is used in multiple places, you only want to disable/unset the height in a specific one? Then you start by finding something that makes your “certain case” discernible from all the other cases - like an ancestor with a certain class or of a certain type, so that you can use that to create a more specific selector.
  
  – 04FS
  Mar 27 at 12:30
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  an extra class or a specific selector matching only one of your labels could do . but your bit of CSS without your HTML structure won't help much. Can you clarify the question and show an example where you have that label where height should not be applied ?
  
  – G-Cyr
  Mar 27 at 12:31
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  well as a workaround I created the same style without height attribute but I wanted some better approach if any
  
  – lapots
  Mar 27 at 12:36
  
  

  
  
  
  

add a comment | 

1

I have style that looks like this

.label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

But it slightly breaks the markup in some places due to height attribute. If I disable height property (do it in browser) it displays label just fine.

I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute.

How to achieve that?

css

share|improve this question

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  apply height: unset;. It sets the height back to it inherited value or if that is not available to the initial value.
  
  – Mark Baijens
  Mar 27 at 12:26
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You mean you want to keep the height on .label-bold-pre-wrap, because that class is used in multiple places, you only want to disable/unset the height in a specific one? Then you start by finding something that makes your “certain case” discernible from all the other cases - like an ancestor with a certain class or of a certain type, so that you can use that to create a more specific selector.
  
  – 04FS
  Mar 27 at 12:30
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  an extra class or a specific selector matching only one of your labels could do . but your bit of CSS without your HTML structure won't help much. Can you clarify the question and show an example where you have that label where height should not be applied ?
  
  – G-Cyr
  Mar 27 at 12:31
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  well as a workaround I created the same style without height attribute but I wanted some better approach if any
  
  – lapots
  Mar 27 at 12:36
  
  

  
  
  
  

add a comment | 

I have style that looks like this

.label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

But it slightly breaks the markup in some places due to height attribute. If I disable height property (do it in browser) it displays label just fine.

I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute.

How to achieve that?

css

share|improve this question

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

.label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

share|improve this question

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

share|improve this question

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

asked Mar 27 at 12:24

lapotslapots

4,1291414 gold badges6868 silver badges146146 bronze badges

2 Answers
2

active

oldest

votes

3

your css code

 .label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

 .other
 height:auto;
 

your html code

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

share|improve this answer

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Oh! Indeed it works with this
  
  – lapots
  Mar 27 at 12:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes it will work's because label-bold-pre-wrap is just set height and 'other' will change fix height to auto . if we set !important to label-bold-pre-wrap then other will not work
  
  – kartik radadiya
  Mar 27 at 12:49
  
  

  
  
  
  

add a comment | 

2

Please try Height: auto; or height: initial;. It will overwrite your height: 20px

share|improve this answer

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i do not believe this answers the question But it slightly breaks the markup in some places ..... I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute. the op needs to reset height for some element, not all of them :(
  
  – G-Cyr
  Mar 27 at 12:33
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just use 'label-bold-pre-wrap' class where need the same CSS and overwrite the height property with the unique selector.
  
  – Joykal Infotech
  Mar 27 at 12:38
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55377142%2foverride-height-attribute-and-disable-it%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

your css code

 .label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

 .other
 height:auto;
 

your html code

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

share|improve this answer

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Oh! Indeed it works with this
  
  – lapots
  Mar 27 at 12:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes it will work's because label-bold-pre-wrap is just set height and 'other' will change fix height to auto . if we set !important to label-bold-pre-wrap then other will not work
  
  – kartik radadiya
  Mar 27 at 12:49
  
  

  
  
  
  

add a comment | 

3

your css code

 .label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

 .other
 height:auto;
 

your html code

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

share|improve this answer

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Oh! Indeed it works with this
  
  – lapots
  Mar 27 at 12:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes it will work's because label-bold-pre-wrap is just set height and 'other' will change fix height to auto . if we set !important to label-bold-pre-wrap then other will not work
  
  – kartik radadiya
  Mar 27 at 12:49
  
  

  
  
  
  

add a comment | 

your css code

 .label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

 .other
 height:auto;
 

your html code

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

share|improve this answer

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

 .label-bold-pre-wrap 
 font-weight: bold !important;
 white-space: pre-wrap !important;
 height: 20px;
 font-size: 10px;
 border-color: #c2c3c4;
 background: transparent repeat-x;
 background-image: url(../reindeer/table/img/header-bg-light.png);

 .other
 height:auto;
 

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

share|improve this answer

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

answered Mar 27 at 12:36

kartik radadiyakartik radadiya

13477 bronze badges

2

Please try Height: auto; or height: initial;. It will overwrite your height: 20px

share|improve this answer

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i do not believe this answers the question But it slightly breaks the markup in some places ..... I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute. the op needs to reset height for some element, not all of them :(
  
  – G-Cyr
  Mar 27 at 12:33
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just use 'label-bold-pre-wrap' class where need the same CSS and overwrite the height property with the unique selector.
  
  – Joykal Infotech
  Mar 27 at 12:38
  

  
  
  
  

add a comment | 

2

Please try Height: auto; or height: initial;. It will overwrite your height: 20px

share|improve this answer

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i do not believe this answers the question But it slightly breaks the markup in some places ..... I need this style in other places, where it doesn't break anything. But in my certain case I need basically the same style, but without height attribute. the op needs to reset height for some element, not all of them :(
  
  – G-Cyr
  Mar 27 at 12:33
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just use 'label-bold-pre-wrap' class where need the same CSS and overwrite the height property with the unique selector.
  
  – Joykal Infotech
  Mar 27 at 12:38
  

  
  
  
  

add a comment | 

Please try Height: auto; or height: initial;. It will overwrite your height: 20px

share|improve this answer

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

share|improve this answer

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges

answered Mar 27 at 12:27

Joykal InfotechJoykal Infotech

1,61633 gold badges55 silver badges1717 bronze badges