wrapping text in css div - javascript

Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>

#Section{display:inline-block;}

Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;

Related

SCSS for adding left line to border not working

I'm trying to had a button that in it's non-selected state looks just like a plain undecorated link.
When a user clicks on it I want to apply an class called "active".
In the active state, I want the left border of the button to turn blue.
Here is how I have my scss, but it's not working:
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
&.active {
border-left:solid 6px blue;
}
}
You shouldn't use a <a> for this purpose if you want the class to be added on click, use <button type="button"> or <span> if you add it when page load your code works. check this fiddle
something
.case-nav-link {
display: block;
min-width: 200px;
font-size: 16px;
border: 1px solid gray;
margin: 10px;
padding: 15px 10px;
border-left: 6px solid transparent;
box-sizing: border-box;
&.active {
border-left: 6px solid red;
}
}
i think you need to use something like jQuery to add the class in a click event
$(document).ready(function() {
$('.case-nav-link').on("click", function(e) {
e.preventDefault();
$(this).addClass('active');
})
})
.case-nav-link {
display: block;
min-width: 200px;
font-size:16px;
border:1px solid gray;
margin:10px;
padding:15px 10px;
border-left:solid 6px transparent;
}
.active {
border-left:solid 6px blue;
}
/* added for testing */
.container {width:500px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="case-nav-link" >Link</a>
</div>

How to put label inside input and make alwas visible

I need to do input like this, and word "seconds" should always stay visible and
unchangeable. How can I do that?
No JavaScripting needed here,
.round {
border:1px solid grey;
border-radius: 4px;
padding: 8px;
}
.round input {
border:0px solid black;
width: 40px;
margin-right: 8px;
}
.round label {
color: grey;
}
.container {
width: 200px;
}
<div class="container">
<div class="round">
<label><input type="text">seconds</input></label>
</div>
</div>
HTMLDog's CSS tutorial is a great one to follow.
#test{
width:100px;
border:1px solid #E0E0E0;
display:inline-block;
border-radius: 5px;
border-top:1px solid #BBDEFB;
}
input{
width:25px;
float:left;
border:none;
}
label{
color:#BDBDBD
}
input:focus{
outline: none;
}
<div id="test">
<div>
<input type="text">
</div>
<div>
<label>Seconds</label>
</div>
</div>

Bootstrap - button display on mobile & desktop

How can I change buttons below to display correctly on phones?
HTML
<div class="container-fluid bg-1 text-center">
<div class="row text-center" style="display:inline">
<div class="col-lg-12">
<div class="col-lg-4" style="float:right;">
QUESTIONS AND ANSWERS
</div>
<div class="col-lg-4">
REGISTER
</div>
<div class="col-lg-4">
CONTACT
</div>
</div>
</div>
</div>
CSS
.btn {
letter-spacing: 1px;
text-decoration: none;
background: none;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
white-space: nowrap;
font-size:14px;
line-height:20px;
font-weight:700;
text-transform:uppercase;
border: 3px solid;
padding:8px 20px;
margin-top:10px;}
.btn-outlined {
border-radius: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}
.btn-outlined.btn-white {
background: none;
color: #FFFFFF;
border-color: #FFFFFF;}
.btn-outlined.btn-white:hover,
.btn-outlined.btn-white:active {
color: #6f5499;
background: #FFFFFF;
border-color: #FFFFFF;}
.btn-xs {
font-size:11px;
line-height:14px;
border: 1px solid;
padding:5px 10px;}
.btn-sm {
font-size:12px;
line-height:16px;
border: 2px solid;
padding:8px 15px;}
.btn-lg {
font-size:18px;
line-height:22px;
border: 4px solid;
padding:13px 40px;}
I want effect on desktop:
+ responsive buttons on phones with full text display. I think the problem is with grids, but when I change to other values I get the same issue.
Use bootstraps built in hidden and visible classes
To see only on mobile
Class="visible-xs"
Hide on mobile
Class = "hidden-xs"
There are also sm, md and lg vertions of the classes for tablet, medium desktop and large desktop.
These classes are very handy but you may need custom media queries.
check below
.btn-lg
.btn-md
.btn-sm
.btn-xs
lg-Large, md-Medium, sm-small, xs-extra small
see below link may be it is useful for you
Media Queries: How to target desktop, tablet and mobile?

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

Text-Align Does not Work

I have the following HTML code. http://jsfiddle.net/Lijo/wJX9C/
I need to align the contents (“HAI” and button) as center aligned. How do we correct it?
Note: It need to work in IE7, Chrome
<html>
<div id="popup" class="popup">
<div id = "poupContentLine1" class="poupContentLine">
HAI
</div>
<div id = "poupContentLine2" class="poupContentLine">
<input type="submit" name="ctl00$detailContentPlaceholder$btnClose" value="CLOSE" id="detailContentPlaceholder_btnClose" />
</div>
</div>
</html>
Style
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0px 0px 0px 0px;
}
poupContentLine
{
width:530px;
height:auto;
text-align:center;
margin: 0px 0px 0px 0px;
}
you missed a .
.poupContentLine
since it's a classname — example fiddle: http://jsfiddle.net/wJX9C/2/
First, remove the popupcontentline styling; it's unnecessary. Then add text-align: center to .popup. Also, shorten it to margin: 0; (irrelevant to your problem, but all those "0"s aren't necessary and lengthen your code.)
Example: http://jsfiddle.net/wJX9C/10/
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0;
text-align:center;
}
Note: the HTML can also be simplified, but I didn't do anything with that.

Categories