This question already has answers here:
Very long words not wrapping in HTML/CSS
(3 answers)
Closed 4 years ago.
I have some arbitrarily nested div elements using display: inline-block like this:
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
Somebody has hidden a specific CSS rule somewhere that's something like this:
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
This prevents all my div elements from being sized smaller than 400px. How do I hunt down which rule is forcing the minimum width?
I've tried manually inspecting each div with Chrome's inspector, but my actual code is nested 20+ div elements deep and it's difficult to determine by inspection.
* {
box-sizing: border-box;
}
div {
border: 1px solid red;
padding: 25px;
display: inline-block;
min-width: 100%;
}
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
</body>
</html>
Go to the 'Computed' tab of the CSS styles. There, look for the 'min-width' property. Hover over the '400px' value and you will see an arrow. Click that arrow and it will jump you to the CSS rule that is enforcing it.
It turns out that I was asking the wrong question! My suspicion was wrong – there was no developer hiding CSS rules. Instead, it was some unbreakable text inside of the div elements.
There was a line of text in the div like Loremipsum....loremipsum that was unable to break properly. The div element cound not resize smaller than the width of this long "word".
Changing the word breaking strategy fixed my problem:
div {
word-break: break-word;
}
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here
https://codepen.io/anon/pen/RmMRQb?editors=1010
As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.
.container {
background: red;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I don't want the div to collapse. I already found a solution here
JQuery: Prevent div from collapsing when element hides()
but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.
I have added a secondary class for the default/native container. I think this is the best/easiest approach.
.improved-container {
background: red;
min-height: 40px;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container improved-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container improved-container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
i'm trying to use CSS to make this code work in any horizontal measure. Like Horizontal Scrolling with Inline Block Working in Firefox, i've been unsucessful.
My code is ready and gives me the visuals i want, but when we zoom the page or use it in a smaller horizontal size, instead of adding a horizontal scroll bar, it breaks down.
<html>
<head>
<title>Gantt Display</title>
<style>
body {font-family:Verdana;font-size:10px;}
.gantt {overflow-x:auto;overflow-y:hidden;background-color:#ffffff;font-size:0;}
.gantt .head {display:block;}
.gantt .head .text {height:32px;display:block;text-align:center;font-weight:bold;background-color:#eeeeee;vertical-align:middle;font-size:10px;}
.gantt .head .month {display:inline-block;border-bottom:1px solid #eeeeee;}
.gantt .head .day {display:inline-block;width:32px;height:32px;text-align:center;background-color:#f8f8f8;margin:0;padding:0;vertical-align:middle;font-size:10px;}
.gantt .head .weekend {display:inline-block;width:32px;height:32px;text-align:center;background-color:#eeeeee;margin:0;padding:0;vertical-align:middle;font-size:10px;}
.gantt .chart {display:block;}
.gantt .chart .day {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#f8f8f8;margin:0;padding:0;}
.gantt .chart .weekend {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#eeeeee;margin:0;padding:0;}
</style>
</head>
<body>
<div class="gantt">
<div class="head">
<div class="month">
<div class="text">Setembro</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="weekend">S</div>
<div class="weekend">D</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
</div>
<div class="month">
<div class="text">Outubro</div>
<div class="weekend">S</div>
<div class="weekend">D</div>
<div class="day">3</div>
</div>
</div>
<div class="chart">
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div class="day"></div>
</div>
</div>
EDITED THIS: answered!
And also, i'd like to understand why are spaces between the "vertical day bars" if "margin" and "padding" are both set to zero?
EDITED: Show the print screens of the problem
That code, that's almost as i want, leaves me with this "resize" problem:
Correct Page (when the page width allows the hole page to be displayed)
Deformed Page (when ... not)
The spaces that you asked, will answer your question. That spaces are totally normal, because inline-block means inline and block at the same time. Inline elements will follow the text line, and one space in the code is one space in the rendered document. That spaces occupy the size of the font-size. To solve the whole problem I suggest this:
.gantt { font-size: 0; }
.gantt .day,
.gantt .weekend { font-size: 1rem; }
By this way you remove all spaces between boxes and reset the font-size on days and weekend days. And that's all!
EDIT: Problem resizing
The problem of the resize is that the container is smaller than the content. You have two options:
1) Set a width to the container (32px * total cells + margin)
2) Set a property on the container that avoids to line breaking (white-space: nowrap)
So change your code with:
.gantt {
white-space: nowrap;
}
I'm having a problem with layout structure.
Here is a mockup: http://i.imgur.com/JbboQ.jpg
And code:
<ul id="nav">
<li></li>
</ul>
<div id="home">
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
I guess the easiest way would be to just add width style to each div but than I wouldn't be able to nest styles which is not an option.
Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it's too late but I just can't find proper and semantic solution for this.
I would be really glad if someone could help me out here,
Thanks.
There are a couple of things you can try:
Separate out your slider div so you can get 100% of your page width.
<div id="home">
...
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div id="columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.slider { width: 100% }
Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.
<div id="home">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }
Note: You will have to adjust the positioning of the slider div.