I am trying to add MDC Web Components to my website using unpkg and while implementing I ran into a problem where I am using two select elements side by side.The problem is while selecting a option from the first select element the element is moving slightly downwards and while selecting option from the second select element the first element is moved to it previous position.I am unable to understand why it is happening.In my HTML i just included the css and js files of the material web components.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<style type="text/css">
.select-position {
min-width: 175px;
left: 25%;
margin:5px;
}
</style>
</head>
<body>
<div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
<select class="mdc-select__native-control">
<option></option>
<option>First Year</option>
<option>Second Year</option>
</select>
<label class="mdc-floating-label">Select Year</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
<select class="mdc-select__native-control">
<option></option>
<option>CSE</option>
<option>ECE</option>
</select>
<label class="mdc-floating-label">Select Branch</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>mdc.autoInit()</script>
</body>
</html>
I did some investigation with another person on the team here. Attached is a codepen of what fixes it.
I think this issue only happens on Chrome. Check Firefox - it didn't happen to me
The heights of the select are changing when a select is with/without a value (in Chrome).
To overcome this issue, we wrapped each select with a div, and made the parent of the 2 elements display: flex.
https://codepen.io/moog16/pen/GBeLxE.
<div style="display: flex">
<div>
<SelectElement ... >
</div>
<div>
<SelectElement ... >
</div>
</div>
Related
Im trying to set a background image for a button using a CSS rule but the image doesn't appear.
The button is the one with the class of "todo". The other parts of the rule work because the width and height of the buttons respond accordingly when adjusted but the image does not appear.
I have tried using both "background: url" and "background-image: url" with no results.
The reason for all this is because Im trying to build a todo list and have the button images change depending on if it has been marked complete.
To do this, my plan is to make two different CSS rules with different classes each with their own button background image(one for complete, one for incomplete). When someone marks the item as complete, Im going to add js that changes the items class name to one that matches the css rule for items marked complete.
If anyone knows of an easier way of doing this part suggestions are welcome.
HTML:
.todo{
background-image: url("../img/check.png");
width:50px;
height:50px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list">
<!–– Below li is a template literal added with js. ––>
`<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId +`" class="todo"></button>
</div>
</div>
</li>`;
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Try to this for the background image in any component:
.todo {
background-image: url(../../img/check.png);
background-position: Xpx Xpx;
background-repeat: no-repeat;
}
I've started to work with jQuery Mobile, and I'm facing a problem that in a regular HTML code it is effortless to solve.
The problem:
I am trying to split the page like in the picture below-
On the left page, I want to add a dropdown list (that's not the problem), and on the right of the screen I want to add the "Age" and two text boxes in the same line but it does not let me add everything in the same line.
My question, is there an easy way to it, for example like Bootstrap?
What is the best way to combine features inline in jQuery Mobile?
Thanks.
Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/
Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.
Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.
Here is a playground:
.ui-grid-a > .ui-block-b {
text-align: right;
}
.ui-grid-solo > .ui-block-a {
white-space: nowrap;
}
.ui-mobile .ui-grid-solo label {
display: inline;
}
.ui-grid-solo .ui-input-text {
width: 30%;
display: inline-block;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<select data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<div class="ui-grid-solo">
<div class="ui-block-a">
<label for="textinput-3">Range:</label>
<input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
<label for="textinput-4">-</label>
<input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
I am trying to create a "chat window", I have most things sorted out but somehow I can't get the "conversation" textarea to occupy the rest of the window vertically.
Here is my full page code (the textarea I want to adjust is the one inside the div id="conversation"):
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<title>
chat prototype
</title>
</head>
<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >
<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>
<div id="chatWindow" class="col-md-10" style="border-style:solid;">
<div id="conversation" class="row">
<textarea readonly class="form-control" style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>
<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>
<span class="input-group-btn">
<button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color: #999999">Send</button>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
</body>
</html>
Every piece of css that is not bootstrap is individually in the elements using style=.
So far I've tried some things:
Relative height: definition, but that gives undesirable results when the window is minimized (it keeps the size according to the screen size and not to the window size).
Flex approach: placed display:flex; flex-direction:column on the div id=conversation and afterwards on the div id=chatWindow always using flex: 1 on the textarea, but with no results. I saw this solution on some other question from Stack Overflow, so decided to try it out obviously.
Ok, so the answer from "user123" was mostly correct but, in terms of browser compatibility it was giving me problems due to $(window).innerHeight();
Which, according to the w3schools description is "the inner height of a window's content area"
However, this was only working on Edge and IE11. To get it working on Edge, IE11, Firefox and Chrome I had to use $(window).outerHeight();.
Which is described at w3schools as being "the outer height of a window, including toolbars/scrollbars"
Bottom-line: In terms of "sense", it makes none of it but I got it working using the outerHeight() instead of the innerHeight() function.
PS:Posted as an answer to call attention.
Assign your window height to your chat box height. Add your own code id or class name instead of "#myDiv".
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).outerHeight();
$('#myDiv').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
For more see this link:ViewPort
I am looking on a way to jump in directly to one of the div which is working once I click.
I would like it to load automatically to the div and not by clicking anything.
<div id="Number">
<label>
<p style="font-size:16px; color: black; background-color: #ffff42">My Cases</p>
</label>
</div>
<iframe src="https://example.com/sr/" name="target-iframe"></iframe>
<a href="https://example.emc.com/sr/#Number" target="target-iframe" onclick="frames['target-iframe'].document.getElementById('Number')
.scrollIntoView();return false">Click</a>
Thanks in advance,
could you try focus on the DIV, that may or may not work:
give the Div a unique id (In your case Number)
<body onload="location.hash = 'Number';">
<div class="Number" id="Number">content</div>
</body>
if you want to automatically load the value present in div tag into iframe,just try to separate into two html file and put in the same directory.
for example,consider two html files one.html and ex.html.one.html
<html>
<body>
<div>
<label>
<p style="font-size:16px; color: black; background-color: #ffff42">My Cases</p>
</label>
</div>
</body>
</html>
ex.html is
<html>
<body>
<iframe src="one.html" name="target-iframe">
</iframe>
</body>
</html>
I'm attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.
I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.
Put simply I have
<div style="position:relative; border:1px solid #cc0000;">
<select style="position:absolute;">
<option>1</option>
</select>
</div>
This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content
How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?
If you need more code, please say so.
Any and all help is appreciated. :)
EDIT
Here's some more code...
HTML:
<div class="orderQuantity">
<label for="quantity" class="orderInputLabel">Quantity:</label>
<div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
<select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
<option value=''> </option>
<option value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
<option value='50'>50</option>
<option value='60'>60</option>
<option value='70'>70</option>
<option value='80'>80</option>
<option value='90'>90</option>
<option value='100'>100</option>
</select>
</div> <!-- end of div that needs border -->
</div>
CSS:
.orderQuantity {
margin-top: 12px;
}
This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.
Help? D:
You can use jQuery for this. Cross Browser Compatible. Check working example http://jsfiddle.net/Npv8P/2/
I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.
<div style="float:left;"> <!-- just toggle border on this div using jquery -->
<select>
<option>1</option>
</select>
</div>
<div style="clear:both;"></div>
Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)