How can I adjust my button height based on the text? This is different to the other questions asked based on the fact that I am using BootStrap classes and am unaware if this is affecting the result.
I would have thought it would have been something similar to doing this:
display: inline-block;
width: 50px;
height: 100px;
word-break: break-word;
overflow: hidden;
but none of the above has worked. Does anyone have a solution to this?
Here is my HTML:
<div class="accordion collapsible-views" id="accordionExample">
<div class="card">
<div class="card-header" id={{collapseCard.headingId}}>
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#{{collapseCard.btnTargetId}}" aria-expanded="true" attr.aria-controls={{collapseCard.btnTargetId}}>
{{collapseCard.btnTitle}}
</button>
</h5>
</div>
And here is my CSS:
.btn {
width: 100%;
background: url(/assets/images/drop-down-icon.png) 100% no-repeat;
text-align: left;
}
.card-header {
border-bottom: 0px;
border-radius: 10px;
padding-left: 12px;
}
.card {
border-radius: 10px;
border: none;
}
Button height should be adjusted
Related
I'm trying to create a hover effect on a div, which scales the whole div slightly. That works well so far, but when i put an image inside that div, it becomes smaller instead of scaling with its parent.
I created a fiddle to illustrate the issue: Fiddle
<main>
<div class=" w-100 row">
<div class="col-6">
<div class="base square clickable">
<div class="content">
<div class="d-flex align-items-center justify-content-around flex-column h-100">
<img src="test.jpg" alt="Company" width="50%">
<h4 class="mt-2">Company Name</h4>
<h5 class="mt-2">Zusatz info</h5>
</div>
</div>
</div>
</div>
</div>
</main>
.base {
background-color: grey;
border-radius: 30px;
}
.square {
padding-bottom: 100%;
margin: 10px;
}
.content {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
}
.base img {
border-radius: 50%;
height: auto;
}
.base.clickable {
transition: transform 300ms;
}
.base.clickable:hover {
cursor: pointer;
transform: scale(1.05);
}
Does anyone have an idea why the image doesn't scale properly?
content{position: absolute;}
remove the element from the normal document flow
so it does not scale with its parent
I'm trying to vertically align a div in IE11. I have tried to use the answer of #billbad here
The difference between my axample and many other examples on the internet is that they don't use a sticky footer and I think is what is causing me the error.
HTML
<div class="wrapper">
<div class="art-header"></div>
<div class="outer-container">
<div class="middle-container text-center">
<div class="contner">
<button type="button" class="btn btn-primary text-center" (click)="addLine()">Primary</button>
<ul>
<li *ngFor="let line of name" >
{{ line }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="rmpm-footer">
<p>Footer</p>
</div>
</div>
A part of CSS
.contner {
min-height: 242px;
max-height: 100%;
width: 604px;
padding-top:10px;
background-color: #FFFFFF;
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
padding-bottom: 12px;
transition: max-height .4s;
-webkit-transition: .4s;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.middle-container {
display: table-cell;
vertical-align: middle;
}
.outer-container {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
Actually the div is not well centred and footer height is resized. that's not what I'm looking for.
Expected behavior is when I add lines the div still centred then footer get down when the div became bigger than initial page height.
I have created a stackblitz example you can check directly my code there.
Try by using margin-topinstead display: table-cell
.middle-container {
margin-top: 40%;
}
I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?
Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump
I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.
The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}
This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp
I have a multilingual web page. It is required to show the labels on the button on the page upside down. I am using the following CSS:
HTML:
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>
CSS:
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
}
So the output is something like this:
The Japanese characters are displayed perfectly according to desire, but the alphabets and numbers aren't, I want BASIC2 to be like the Japanese characterslike
B
A
S
I
C
2
How can I achieve this?
EDIT FOR EXPLANATION:
I am using the same logic to transform my text, but if you look at the Japanese characters they get transformed smoothly, while the normal alphabet characters tend to "ROTATE" I don't want the rotation for English characters, why can't they be displayed the same as Japanese characters.
Use text-orientation: upright; this will solve the problem.
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:left;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-transform:uppercase;
font-size-adjust:0.5;
text-orientation: upright;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic 2</div>
</button>
Updated
Below samples work cross browser , which text-orientation doesn't (yet).
Simplest would be like this, using <br>, manually added or with script.
var elems = document.querySelectorAll('.test div');
for (var i = 0; i < elems.length; i++) {
elems[i].innerHTML = elems[i].textContent.split('').join('<br>')
}
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display: inline-block;
}
.topdown-button div{
text-transform: uppercase;
vertical-align:top;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
text-transform:uppercase;
font-size-adjust:0.5;
}
.divider{
border-top: 1px solid;
padding: 10px 0;
margin-top: 10px;
}
<button class="btn btn-primary topdown-button">
<div>お<br>客<br>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B<br>a<br>s<br>i<br>c<br>2</div>
</button>
<div class="divider">Sample using script</div>
<button class="btn btn-primary topdown-button test">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button test">
<div>Basic2</div>
</button>
2:nd alternative, using word-break
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
vertical-align: top;
display:block;
text-align: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
min-height: 148px;
position:relative;
text-align:center;
margin: 0 auto;
word-break: break-all;
width: 12px;
}
<button class="btn btn-primary topdown-button">
<div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>Basic2</div>
</button>
you can utilize flexbox to make you css look more clean. Look this pen
HTML
<button class="btn btn-primary topdown-button">
<div>お</div>
<div>客</div>
<div>様</div>
</button>
<button class="btn btn-primary topdown-button">
<div>B</div>
<div>A</div>
<div>S</div>
<div>I</div>
<div>C</div>
<br>
<div>2</div>
</button>
CSS
.topdown-button{
max-height: 150px;
min-height: 150px;
width: 60px;
border: 3px solid navy;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.topdown-button div{
text-transform: uppercase;
font-size:18px;
}