I'm using Bootstrap Application theme and I have a media-list where in media-body the text is users' input....
Unfortunately if a user inputs a very long word the page breaks and a horizontal scrollbar appears...
I tried setting max-width & width to 100% in body and have tried different word-wrapping techniques on the element including:
white-space:pre-wrap;
word-wrap: break-word;
white-space: pre-line;
overflow: hidden;
display: block;
but no luck... any idea on why is word-wrapping not working?
Thanks a lot
in CSS:
body {
margin: 0;
max-width: 100%;
padding-top: 50px;
padding-bottom: 20px;
}
in page (some code changed for security)
<ul class="list-group media-list media-list-stream">
<li id="43434" class="media list-group-item p-a">
<div class="media-body">
<span style="padding-bottom: 5px;" class="pull-right close" onclick="Delete();return false;" aria-hidden="true">×</span>
<span style="white-space: pre-wrap;">text</span><br/>
<small class="text-muted"><span data-utcdate="date"></span></small>
</div>
</li>
</ul>
Related
The problem is, I'm trying to test my template for all the browsers, it looks fine in Chrome (I use it primarily) but it looks off in Firefox and Explorer.
I tried to use prefixes, I used auto prefix in brackets to make sure everything is as it should. in Firefox, the background is not showing, and the search bar doesn't have the correct padding that I gave it. Same thing with explorer but the search bar is fine but the background not so much.
.header {
background-image: url(images/headerimg.webp);
background-size: cover;
background-position: center;
height: 300px;
padding: 0;
margin: 0;
text-align: center;
}
.searchContainer {
float: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.search {
padding: 7px 10px !important;
border-radius: 0 4px 4px 0;
font-size: 17px;
border: 2px solid #363a5e;
border-left: none;
width: 360px;
color: #666a8c;
margin: 1px 0 0 -3px;
background-color: #363a5e;
-webkit-transition: .2s;
transition: .2s;
}
<header class="header jumbotron" role="heading" aria-level="1">
<div class="filter">
<div class="container">
<div class="mobileOpenContainer">
<span onclick="openNav()" class="showNavSearch"><i class="fas fa-bars"></i></span>
<span onclick="openSearch()" class="showNavSearch" id="search"><i class="fas fa-search"></i></span>
</div>
<div class="logoNavContainer" role="img">
<img class="logo" src="images/Logo.svg" alt="logo">
<nav>
<ul class="navbar" role="navigation">
<a href="#">
<li class="nav">خانه</li>
</a>
<a href="#">
<li class="nav">تبلیغات</li>
</a>
<a href="#">
<li class="nav">تماس با ما</li>
</a>
<a href="#">
<li class="nav">خرید قالب</li>
</a>
</ul>
</nav>
</div>
<div class="reqSearchContainer">
<button class="request" role="button"><i class="fas fa-film"></i>درخواست انتشار</button>
<button class="request" role="button"><i class="fas fa-heart"></i>حمایت از ما</button>
<div class="searchContainer">
<label>
<input class="search" placeholder="جستوجو..." aria-label="Searchbar">
<span class="searchBtn" aria-label="Search button"><i class="fas fa-search"></i></span>
</label>
</div>
</div>
</header>
This is how it looks like in Chrome (how it should):
This is Firefox:
IE is the same as Firefox, but the search bar is fine.
Okay I found a way to do it, but it may not be the best for some who have the same problem as I had:
First of all, to be able to see the background, I had to update to Firefox 65+ because .webp is supported from that version, it seems (for IE, it doesn't support it at all, which is a shame, so I just changed it to jpg)
For the searchbar however, I didn't find any good way to fix the padding, so I just used height in CSS to give it fixed height and that also fixed that problem, but may not be the best option for some.
As you will tell from this question I'm still new with Flexbox as well as with SASS. I have an MVC app where I'm trying to align the header login information depending on if they are authenticated or not.
What I'm trying to accomplish is to have my header with a logo to the left and some login/register buttons flush to the bottom in a single row if you are not authenticated or their username and logoff/account info stacked on top of each other if they are authenticated.
I'm trying to use flexbox to accomplish these. The idea is I would have an overall parent container "header_account-info", the logo in the "header__logo" child container, and other login parts in either "header_account-user" or "header-account-login". For testing I'm using the "header-account-login" container.
With the code below I can not get the "header-account-login" container to have a background color (using for testing) nor can I get it to align to the bottom.
I put this in Code Pen and see the same results.
https://codepen.io/anon/pen/WgGxQL
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
HTML
<div class="header">
<div class="header__logo">
<img src="~/images/logo.png" class="header-logo" />
</div>
<div class="header_account-info">
<div class="header-account-login">
<a href="#Url.Action("Register", "Account")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action("Login", "Account")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
SASS
.header {
display: flex;
padding: 3px;
&__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px; /*TESTING*/
}
&__account-info {
display: flex;
background-color: aquamarine;
}
&__account-user {
background-color: blanchedalmond;
}
&__acount-login {
align-items: flex-end;
background-color: aquamarine;
}
}
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
Because you have typos in your HTML/CSS - in some cases you are using a single underscore and in others two. Also "account" is incorrectly spelled in some places.
As for the lauot, I think this will suffice:
.header {
display: flex;
padding: 3px;
justify-content: space-between;
}
.header__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px;
}
.header__account-info {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">
<img src="http://www.fillmurray.com/g/140/100" class="header-logo" />
</div>
<div class="header__account-info">
<div class="header__account-login">
<a href="#Url.Action(" Register ", "Account ")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action(" Login ", "Account ")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
Here is one way to make it work:
.header-account-info {
position: relative;
}
.header-account-login {
background-color: red;
position: absolute;
bottom: 0px;
right: 0px;
width: 158px;
}
The way you are trying to call your class (i.e. "&__acount-login") is wrong - just give yourself the full class name like my example.
My problem is that when I am resizing the browser window, the first text breaks up. It should never break up the words, just show the entire sentence no matter how small the window gets. I've tried with queries, but can't figure out how to do it correctly. See the image to understand the issue.
<div class="row">
<div class="col-sm-7">
<ul class="list-inline">
<h2>
<li class="list-inline-item">LYD</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LYS</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LED</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">AV</li>
</h2>
</ul>
</div>
<br>
<div class="col-sm-5">
<div class="middle">
<h2>
<span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
</h2>
</div>
</div>
</div>
CSS:
ul li { display: inline; }
ul.list-inline{
text-align: center;
padding-right: 15px;
}
.middle{
margin-bottom: 60px;
padding-right: 15px;
}
The main issue here is that the content, namely the list and list items all inherit their width from the containing col-7.
If you know the exact width of the text you can just put an exact width property on it-
ul {
width: 302px;
}
In a more dynamic way, though, you can use either white-space or max-content
/* white-space */
ul {
white-space: nowrap
}
/* max-content*/
ul.list-inline {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
At this site, there is a div.social below the Online Bookings at top right of the screen.
http://imgur.com/a/QhlIL
Note: I've not been able to upload images to SO for months - always says the image is too large (> 2MB) when it is 140 KB.
For some reason .social is not displaying, nor its sub-elements:
<div class="social">
<a title="Trip Advisor" href="#" target="_blank">
<div class="tripAdvisor"></div>
</a>
<a title="Facebook" href="#" target="_blank">
<div class="facebook"></div>
</a>
<a title="Instagram" target="_blank" href="#">
<div class="instagram"></div>
</a>
<a title="YouTube" target="_blank" href="#">
<div class="youtube"></div>
</a>
</div>
<style>
.headRight .tripAdvisor {
background: url(../images/social/tripadvisor.png) no-repeat;
width: 28px;
height: 22px;
}
</style>
.social is set to display: block; and there is enough room to fit the icons in.
Help appreciated.
Just checked the bug on your website.
You must apply the style to the child divs of .social
.social div {
display: inline-block;
margin-right: 15px;
display: inline; // remove this line
zoom: 1;
}
remove the
"display: inline"
Just keep
.social div {
display: inline-block;
margin-right: 15px;
zoom: 1;
}
from that class. Will work perfectly.
I have a three column markup for which the middle column #palette( elastic column) has following innerHTML markup snippet
<div id="palette">
<div id="wrapper" style="left: -354px; top: 0px;">
<div id="colours">
<ul>
<li class="swatch"><a tite="Beige" style="background-color:beige;" class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Bisque" ... class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Brown" style="background-color:brown;" class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Coral" style="background-color:coral;" onclick="setColouringColour(this);" class="label" href="javascript:void(0);"><span> </span></a></li>
....
</ul>
</div>
<div id="brush-sizes"> <span style="width:16px; height:16px;" ><span>16</span></a></span> <span class="brush badge" style="width:32px; height:32px;"><a...><span>32</span></a></span> <span class="brush badge" style="width:64px; height:64px;"><a...><span>64</span></a></span> </div>
<div id="brushes"> <a class="selected btn btn-mini"...> </a> <a class="btn btn-mini"> </a> </div>
</div>
Where the following CSS rules apply
#palette {
float: left;
height: 100%;
position: relative;
width: 100%; overflow:hidden;
}
#wrapper {
display: inline-block;
position: absolute;
top: 0 !important;
white-space: nowrap;
width: auto;
}
Note: #palette is overflow:hidden so that #wrapper can be
scrolled using left:*n*px;. The children inside
#wrapper are all display:inline-block; clear:none;
The problem I am having is that #wrapper is not at "full width" of its children...thus I can't seem to be able to scroll to the very end.
What is the source of the problem here and how can I fix it using CSS ONLY( can it be accomplished CSS only?)
Apparently I needed to set one of the 2 remaining < div > to a fixed width and also tried setting the max- and min- width appropriately. Don't know why that worked