I am building a dropdown such that there is a line below the first option like:
This is what my HTML looks like right now:
<div class="wrapper_19d9p2m" >
<div class="inputWrapper_ioof0g">
<div class="inputWrapper_5vhtgf-o_O-small_cef76u Input">
<label class="bodyM_1n94ib9-o_O-label_rospgn-o_O-label-normal_685omm-o_O-iconLabel_13k1ogx" for="input-5"></label>
<span class="iconInputWrapper_1eva0mx">
<div class="iconWrapper_1nhktl7">
<svg aria-label="magnifier" class="icon_n7qd0i" fill="#8796A6" width="14" height="14" data-component-id="Icon">
<use xlink:href="#sprite_magnifier"></use>
</svg>
</div>
<input class="input_h63q7t-o_O-bodyM_1n94ib9-o_O-iconInput_1oxe2z4" id="input-5" type="text" maxlength="127" min="" max="" placeholder="Find a Field" value="">
</span>
</div>
</div>
<div class="fieldsWrapper_19uhklj">
<div class="fields_180iae2" style="
">
<div class="textContent_1vqpmfj" > Select All multiselect </div>
<div class="toggle_c87odb-o_O-toggle-small_1y6w94g">
<label for="toggle-input-0" class="switch_16604cv">
<input id="toggle-input-0" class="checkbox_1u9fru1" type="checkbox">
<div class="slider_7rkf1x">
<div class="sliderButtonWrapper_mklg5b">
<div class="sliderButton_g21oh2-o_O-sliderButton-small_1tb459x"></div>
</div>
</div>
</label>
</div>
</div>
<div class="fields_180iae2">
<div class="textContent_1vqpmfj"> No </div>
<div class="toggle_c87odb-o_O-toggle-small_1y6w94g" data-component-id="Toggle">
<label for="toggle-input-2" class="switch_16604cv">
<input id="toggle-input-2" class="checkbox_1u9fru1" type="checkbox">
<div class="slider_7rkf1x">
<div class="sliderButtonWrapper_mklg5b">
<div class="sliderButton_g21oh2-o_O-sliderButton-small_1tb459x"></div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
Now I tried adding a border-bottom: 1px solid black on the div with fields class eg: i.e each of the optios.
But because the parent adds a padding it is not able to match full widt.
How can I override it
I think what you could do is add a negative margin to your child component like displayed below, but make the px === to the padding of the parent, then pad your child to adjust its content to the desired location.
.parent{
padding: 25px;
}
.child{
margin-left: -25px;
margin-right: -25px;
}
Assuming the parent's paddings are like padding: 5px 10px;
Add margin-left: -10px; margin-right: -10px to the children would let border-bottom to take the full width.
parent {
display: block;
margin: 15px;
padding: 5px 10px;
border: 1px solid grey;
}
child {
display: block;
border-bottom: 1px solid blue;
}
.full-width child {
margin-left: -10px;
margin-right: -10px;
}
<parent>
<child>Child - border bottom not taking full width</child>
</parent>
<parent class="full-width">
<child>Child - border bottom takes full width</child>
</parent>
You can use negative margins on the child.
div {
color: #aaa;
}
.parent {
padding: 2rem;
outline: 1px solid red;
}
.child {
/* negative margin to negate parent padding */
margin: 0 -2rem;
padding: 2rem;
outline: 1px solid dodgerBlue;
}
<div class="parent">
.parent
<div class="child">
.child
</div>
</div>
Related
I am trying to design Google search page and facing some problems.
I have completed almost every thing but got stuck in aligning "Google Search" button and "I am feeling Lucky button" in line and in center below search bar.
Below is my HTML and CSS for entire layout.
body,a{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
margin: 5px;
text-align: center;
}
.i{
margin-left: auto;
margin-right: auto;
margin-top: 135px;
}
nav{
text-align: right;
padding-top: 5px;
}
.sb input{
border-radius: 25px ;
border: 0.5px solid ;
height: 40px;
width: 480px;
}
.foo{
font-size: medium;
padding-left: 40px;
padding-right: 40px;
}
<nav>
<div>
Google Image Search
Advance Search
</div>
</nav>
<img src="image.png" class="i">
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="gs">
<input type="submit" value="Google Search">
</div>
</form>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
Here is my output: http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd
Here is how I would do it. I would wrap the two buttons in a parent div with a classname buttons-wrap or any class name of my choosing:
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="buttons-wrap">
<div class="gs">
<input type="submit" value="Google Search">
</div>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
</div>
</form>
I would then reference the .buttons-wrap class in CSS and use flexbox to center it:
.buttons-wrap {
display: flex;
justify-content: center;
margin-top: 3px;
}
If you don't know flexbox, you can also use the following:
.buttons-wrap>div {
display: inline-block;
margin-top: 3px
}
> selects the children elements.
.button-wrap {
display: flex;
justify-content:center;
margin-top:10px
}
flex is the value of css display. By using display:flex in parent elements, child elements automatically align like columns or rows with auto width and auto height.
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container.
I have a card element that can be dragged from one column to another column. This works, except the card has a transparent dropzone element inside it that becomes opaque on Chrome browsers when dragging. This problem is not the case on Firefox or Safari.
You can see the code here.
How can I fix this problem on Chrome browsers?
I tried by playing with opacity and rgb() in css, but with no success. See the code below.
#board {
display: flex;
padding: 8px;
width: 800px;
}
#board * {
font-family: sans-serif;
}
.board__column {
flex: 1;
background: #fcb51d;
padding: 10px;
border-radius: 5px;
}
.board__column:not(:last-child) {
margin-right: 10px;
}
.board__column-title {
margin-bottom: 20px;
font-size: 30px;
color: white;
user-select: none;
}
.board__item-card {
box-sizing: border-box;
cursor: pointer;
background: white;
padding: 8px;
border-radius: 8px;
}
.board__item-input {
background: white;
padding: 10px 15px;
border-radius: 5px;
}
.board__dropzone {
height: 10px;
transition: background 0.15s, height 0.15s;
}
.board__dropzone--active {
height: 20px;
background: rgba(0, 0, 0, 0.25);
}
.board__add-item {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: white;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 5px;
cursor: pointer;
}
<div id="board">
<!-- Todo's tasks -->
<div class="board__column">
<div class="board__column-title">Todo</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
My first todo task 🤓
</div>
<div class="board__dropzone"></div>
</div>
<div class="board__card" draggable="true">
<div class="board__item-card">
My second todo task...
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- In progress tasks -->
<div class="board__column">
<div class="board__column-title">In Progress</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
I'm working on the task 😁
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- Done tasks -->
<div class="board__column">
<div class="board__column-title">Done</div>
<div class="board__column-items">
<div class="board__item-card" draggable="true">
<div class="board__item-card">
I finished the task 😇
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
</div>
I Believe it is not the dropzone div element that is turning opaque, I believe that the board__card element being draggable forces it somehow to inherit the color of its parent, please check the following link:
Why HTML draggable element drags with parent background?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers
You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax
Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!
A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block
Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!
Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>
You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.