I have a problem with Foundation select menu, I found some results on google but nothing seems to work.
I'm using:
<label>Select Menu
<select>
<option value="husker">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="starbuck">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="hotdog">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="apollo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
</select>
</label>
I tried to set in the css Foundation the width options for select and for the options:
select {
max-width: 100% !important;
border-radius: 0; }
select option {
max-width: 100% !important;
}
And the result is still wrong, it is somehow taking the maxim possible width of the text.
This is the resut:
Related
I'm wondering if there is a strategy to get colored bullet list dots just using Tailwind utility classes and without writing any line of CSS.
I spent some time searching but I haven't found any solution yet.
This is the list I'm working on at the moment.
<ul class='list-outside list-disc ml-6'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
<li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
<li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
Just add marker:text-color, where color is the color you want:
<ul class='marker:text-green list-outside list-disc ml-6'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
<li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
<li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
You will have to specify it like this to achieve a colored bullet list.
<li class="text-red-500">
<div class="text-black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
</div>
</li>
I solved it like this:
<ul class='list-outside list-disc ml-6'>
<li class="text-red-500">
<span class="text-black">Lorem ipsum dolor</span>
</li>
<li class="text-red-500">
<span class="text-black">Nunc nec gravida enim.</span>
</li>
</ul>
Niche answer here, but for those wanting to achieve this in innerHTML in a React component, you can target the li element specifically with:
.your-class {
li::marker {
#apply text-sky;
}
}
<div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>
This answer is an approximation and depends on framework. If you're using Tailwind in React you may already be familiar with 'unresetting' your your base styles. This solution is for those who have done this.
More here and here.
Background
I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.
Problem description
I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.
Problem Illustration
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
Questions
Why is it not working as expected?
Am I doing something wrong according to the W3C specs or is it a lack of browser support?
Are there any ways/tools to work this around?
having problem with background image with css on Mac Os.
if we change the resolution of browser it turn to look bad.i need look like same in every resol and also on Mac os.
There is 2 section have bg image
using Mac os
http://i.imgur.com/UmGGBA4.jpg
using window os
https://i.imgur.com/QjXNxag.jpg
I want to look like window os image on MAC.
code
.section-about {
background: url("http://i.imgur.com/NlczAVu.jpg") top right/cover no-repeat;
min-height: 545px;
}
/* line 180, ../sass/screen.scss */
.section-experinece {
background: url("http://i.imgur.com/eAeB5ci.jpg") top right/cover no-repeat;
min-height: 1130px;
}
h1 {
margin: 0;
}
.one {
color: #fff;
margin: 0;
}
p {
margin: 0;
}
<section id="about" class="section-about">
<h1>section1</h1>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
<section id="experinece" class="experinece-sec section-experinece">
<h1>section2</h1>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
thanks.
It looks like your problem is not the OS you are on, but the screen resolution you are viewing on.
Check the page on a windows machine and make the view as wide as you can.
I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.
In Bootstrap 2.x, you can do this..
<div class="row">
<div class="span4">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="clearfix"></div>
<div class="span4">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Demo: http://www.bootply.com/120857
i put a row class in each row. here is the code
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
and float it left and put margin buttom
whole code is here
http://jsfiddle.net/ndEUS/
Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x.
http://jsfiddle.net/LmPwe/
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.
I have code here. In this code, as it can be seen that there is a div tag with class image and text is appeared on the right side. As there is a lot of text and some of the text is visible on the right and some is below the image tag. I want this text to be appeared on the right side no matter how much text is there.
How can I achieve this?
<div class="image"></div>
<p class="text">adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare. adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.</p>
css
.image {
width: 100px;
height: 100px;
float: left;
border: 1px solid #999;
}
I think you just need to give your paragraph a margin-left based on the width of your image:
margin-left: 110px;
Demo: http://jsfiddle.net/Q7JhN/1/