need help finding which div element.style is attributed to - html

I'm working in a SaaS program that allows you to enter a custom CSS file with some html as well. That means I can't remove anything from their code, just override it. I've found an element.style in their code but I can't tell how to override it because I can't find a div or class that it goes with. The line in question is <div style="margin:5px; width:140px; height:20px; float:right;" align="right">. I want to change width: 140px to 200px
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style=
"float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style=
"float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style=
"float:left;" title="Month"></div>
</div>


.boxcontent>div>div:nth-child(2) {
background-color: red;
width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style="float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style="float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style="float:left;" title="Month"></div>
</div>
</div>
</div>

Related

clear both in css makes a huge height for first child

I used a lot of float and clear but in this case I faced with a strange problem.
this is my html code:
.tablerow{
border:1px solid blue;
padding:0px;}
.tablerow .tablerowcolumn{
height:30px;
width:15%;
margin:0px;
float:right;
border:1px solid #565656;
background-color:#fff;
}
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
but the result is different from what expected:

You code works, but not exactly as expected, since .tablerows haven't height property, and they are trying to be as little as possible.
So if you add a height (eg. 100px), you'll get the result:
.tablerow{
border:1px solid blue;
padding:0px;
height:100px;
}
.tablerow .tablerowcolumn{
height:30px;
width:15%;
margin:0px;
float:right;
border:1px solid #565656;
background-color:#fff;
}
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>
<div class="tablerow">
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div class="tablerowcolumn">
</div>
<div style="clear:both"></div>
</div>

Sets divs one into another without falling out each other

I want to center my divs like in the picture below.
The container is half of the screen.
<div id="continer" style="width:50%; height:50%; display:inline-block; ">
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
</div>

You could do this like that:
.main{
background-color:red;
padding:10px;
display:flex;
flex-direction:column;
}
.sub{
background-color:green;
padding:10px;
display:flex;
flex-direction:row;
justify-content:space-around;
margin:10px 0;
}
.inner{
background-color:yellow;
padding:10px;
margin:10px;
}
.inner:nth-child(1){
flex-grow:1;
}
.inner:nth-child(2){
flex-grow:3;
}
<div class="main">
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
</div>

Using bootstrap it's very simple, check this script. It will be also responsive:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="padding-top:50px;">
<h4>
bootstrap grid view/ column example
</h4>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
</div>
</body>
</html>

Here an example similar to your code:
div
{
border: 1px solid black;
padding: 5px;
border-spacing: 5px;
}
<div style="width:50%;display:table">
<div style="display:table-row">
<div style="width:30%; display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</div>

<div>'s not appearing in a 'stack'

Sorry if this has been asked, but nothing I found worked in my case.
Here is my current code. I have included more detailed problems there, but basically some of my elements are either not appearing or appearing in unwanted locations.
https://jsfiddle.net/9e8tffh5/2/
<div class="chat">
<div class="bar">
<div class="title">
<span class="name">Random Chat</span>
</div>
</div>
<div class="options">
</div>
<div class="room">
<div class="post other" id="1">
<div class="content">
<span class="note">Hi there!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
<div class="post self" id="2">
<div class="content">
<span class="note">Hi Bob</span>
</div>
<div class="details">
<div class="time">
<span class="time">12:32</span>
</div>
</div>
</div>
<div class="post self" id="3">
<div class="content">
<span class="note">How are you doing?</span>
</div>
<div class="details">
<div class="time">
<span class="time">9:33</span>
</div>
</div>
</div>
<div class="post other" id="4">
<div class="content">
<span class="note">Great!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="input">
<input type="text" placeholder="Send a message" />
</div>
</div>
</div>

fiddle
.chat .room .self {
/* position: absolute;
right: 8px; */
text-align: right;
}
.chat .room .self .details {
/* position: absolute;
right: 8px; */
text-align: right;
}

Force element to move up

I have a box that is rendering lower and I cant figure out why.
<div id="hint-history" class="popup">
<div class="row">
<div class="col" id="closehistorypopup">
<div class="body">
<button class="x">
<span class="sprite close"></span>
</button>
<div class="title">Hint History</div>
<div class="lists">
<?php for($i=0;$i<6;$i++) { ?>
<div class="list history[[$i]]" id="history[[$i]]">
<div class="info">
<div class="picture monophoto">
<div class="text">BO</div>
<div class="img" style="background-image: url();"></div>
</div>
<div class="right">
<div class="lineone">John Smith</div>
<div class="linetwo">Daily Essentials</div>
</div>
</div>
<div class="boxes">
<div class="left">
<div class="box box1"></div>
</div>
<div class="right">
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</div>
<a class="cbutton whiteonblack">VIEW LIST<!--SEE <span class="owner">JOHN'S</span>--></a>
</div>
<?php } ?>
<?php $i++; $privateCount = 1; ?>
#if ($privateCount > 0)
<div id="privatecard" class="list history[[$i]]">
<div class="info">
<div class="picture monophoto" style="visibility: hidden;">
</div>
<div class="right">
<p id="privatecounter">
#if ($privateCount == 1)
There is [[$privateCount]] private user.
#else
There are [[$privateCount]] private users.
#endif
</p>
<div class="linetwo"> </div>
<div class="linetwo"> </div>
<div class="linetwo"> </div>
</div>
</div>
<div class="boxes">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
#endif
</div>
No matter what I do it wont budge.
.privatecard {
margin-top: -500px !important;
}
.privatecard {
padding-bottom: 500px !important;
}
//etc
How can I force it to move up?

Post a fiddle?
I've had this issue in the past though, and I've resolved it by a combination of making sure all inline-block elements are also vertical-align:top; (or any other state, as long as it's all consistent). AND then, set a min-height to the parent container, and a min-height to all the inline-block'd elements

bootstrap affix floats all the way to the left when scroll

I have a div within a container that I would like to stay fixed on the right side of the screen. But when the user start to scrolls it just shifts all the way to the left. Thanks for any help.
http://jsfiddle.net/kbLak/
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
recent things:
</div>
</div>
</div>
<div class="explore_recentAlbums" data-spy="affix" data-offset-top="20">
<div class="ex_recentBar">
<div class="ex_titleDetails">
<span>recent stuff: </span>
</div>
</div>
<table>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent</span>
</div>
<span class="NoDataFound">No Photo.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
xzxz
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src=""/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/pics"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent Video Albums</span>
</div>
<span class="NoDataFound">No Video.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
test
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src="#"/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/vids"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent P</span>
</div>
<span class="NoDataFound">No.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
test
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src=""/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/aio"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
</table>
</div>
​

Add this to your css and it will stay to the right:
.explore_recentAlbums {
right: 0;
}