I have created a small dialog with UI Bootstrap that contains some basic text. The text content always overflow on the right when it's too large. Here is the code:
<div>
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
<div class="modal-header">
<h3 class="modal-title">{{panel.name}}</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-1">
<img src={{panel.image_url}} id="img-beer">
</div>
<div class="col-sm-10 col-md-10 col-lg-10 details-info-content">
<p>
{{panel.description}}
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Close</button>
</div>
</script>
</div>
I have added in the CSS the following stype property:
.details-info-content {
overflow-wrap:break-word;
}
.modal-dialog {
width: 75%;
height: 70%;
}
but the problem persists. Where is the error?
You can simply use Bootstrap's text-wrap class.
I think you have a typo - overflow-wrap, not overflow-wrape
Try this
.details-info-content {
word-wrap: break-word;
}
.modal-dialog {
width: 75%;
height: 70%;
}
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
Hiii Everyone,
I have multiple divs.Inside each div there will be panel body and its footer.What happening is based on panel body content its not adjusting instead its overlapped panel footer above panel body.Below is my screenshot
In the above image u can understand what is happening.And my example code is
<main class="page-content content-wrap" style="background-color:#E9EDF2;height:auto">
<div id="main-wrapper">
<div id="five_radio_question">
<div class="panel-body">
<br/><br/>
<h2 style="color:#C32F10"><b>Reorder Paragraphs</b></h2><br/>
<div class="panel-body" style="background-color:#EFAD4D;color:#fff;border-radius:4px;padding:1px">
<h4>The text bubbles in the left panel have been placed in a random order. Restore the original order by dragging the text bubbles from the left panel to the right panel.</h4>
</div>
<br/>
<p style="font-size:14px">
Write 1-5 next to each paragraph to indicate the order you think is correct.
</p>
Contentss
</div>
</div>
<div class="panel-footer">
<h3 style="float:left"> Question 5 of 14</h3>
<div style="float:right">
<button class="btn btn-danger btn-lg first_ques_button4">
Previous Question
</button>
<button class="btn btn-danger btn-lg second_ques_button4">
Next Question
</button>
</div>
</div>
</main>
And also I tried with css in somany ways with the help of google.And My issue is not resolved.
#main-wrapper:after {
clear: both;
content: "";
display: table;
}
body {
display: block;
position: relative;
height: auto;
min-height: 100% !important;
}
Please anyone help me to get out of this issue.Thanks in advance..
Here is an example: https://jsfiddle.net/sunvom3a/
I have a list of items.
Basically a container with some text and a dropdown. The idea is when you hover over the text the dropdown should be directly below (kina like a tooltip).
.container {
overflow-y: scroll;
height: 100px;
border: solid 2px green;
}
.popup {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
display: none;
}
.item:hover .popup {
display: block;
}
<div class="container">
<div class="item"><span> Text1</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text2</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text3</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text4</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text5</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text6</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text7</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text8</span>
<div class="popup"></div>
</div>
<div class="item"><span> Text9</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text10</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text11</span>
<div class="popup"></div>
</div>
</div>
The first few elements that fit below the scrollbar of overflow-y (with my resolution these are first 5 items) work great:
but the rest are broken - when the scroll bar is moved this offset is added as a distance between the popup and the text:
Is there any way to get the consistent behavior for all items in the list?
This is exhibited in Chrome and Edge (Firefox works as expected). It is calculating the relative position based on the initial, out-of-view position.
You need to add this...
.item{
position: relative;
}
...to make the absolutely positioned element positioned relative to the hovered item.
Fiddle: https://jsfiddle.net/sunvom3a/1/
The downside to the above solution is that it moves the tooltip inside the container, making a portion of it likely to be out of view. On a side note, I'm not sure this is a great UI anyway since you are covering other options with your tooltip. I would recommend attaching it to the parent of your container (then you don't have to worry about the tooltip being out of view either.
Adding to your snippet...
body{
position: relative;
}
...will always put the tooltip in the top right corner of the body. This would be better done by adding a container for your scrolling container, but this is a mere example.
Fiddle: https://jsfiddle.net/sunvom3a/2/
just change position absolute to relative in popup class
jsfiddle: demo
.container {
overflow-y: scroll;
height: 100px;
border: solid 2px green;
}
.popup {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
display: none;
}
.item:hover .popup {
display: block;
}
<div class="container">
<div class="item"><span>Text1</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text2</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text3</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text4</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text5</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text6</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text7</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text8</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text9</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text10</span>
<div class="popup"></div>
</div>
<div class="item"><span>Text11</span>
<div class="popup"></div>
</div>
</div>
I have a title with a button on the right, but I met two problem:
I want the title in the centre of the page;
I want the button and title are in the same horizontal line.
This is my code:
<div class="container">
<div class="row">
<div class="btn btn-primary pull-right">This is a long button</div>
<h1 class="text-center">This is a long title</h1>
</div>
</div>
This is my demo.
Please help me, thanks.
Use this code to attain the desire result:
HTML:
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center">This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right mar">Follow</div>
</div>
</div>
CSS:
.mar{
margin-top: 20px;
}
you can use the tags < center > < /center >
example:
<center>long title</center>
Just add this data in a new CSS file or in an existing CSS file.
#bt {
width: 100%;
}
.text-center {
width: 100%;
}
Also add an ID to the button as "bt".
Just zero the margin-top on the h1
.text-center {
margin-top: 0;
}
At least in your code-pen that did the trick.
In the future, in situations like this, always use the inspector on your browser to see the box-model of the element, helps a lot.
If you need more info on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Make Your Div Width as 100% and make use of Text-align Property.
<h2 style="text-align: center">XYZ</h2>
Then adjust your buttton with margin-top property.
Like this:-
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center" **style="margin-top: 0"**>This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right">Follow</div>
</div>
</div>
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}