Css 反应：当页面大小调整到iPad或更小时，插入符号图标会一直移动到下拉菜单之外_Css_Reactjs_Css Position_Responsive_Styled Components

Css 反应：当页面大小调整到iPad或更小时，插入符号图标会一直移动到下拉菜单之外

css reactjs

Css 反应：当页面大小调整到iPad或更小时，插入符号图标会一直移动到下拉菜单之外,css,reactjs,css-position,responsive,styled-components,Css,Reactjs,Css Position,Responsive,Styled Components,我有一个风格化的react组件，它有一个手动滚动的下拉菜单，包括一个插入符号图标，每次我测试下拉菜单的响应性时，插入符号图标就会弹出。我将下拉列表包装在一个较大的组件中，将所有内容放在同一行，然后将图标包含在样式化的select组件中。我曾在另一个应用程序中使用过这种方法，下拉列表完全响应，图标放置没有任何问题，因此我对这个应用程序感到非常困惑。任何帮助/建议都很好 import React, { Component } from 'react' import PropTypes from 'p

我有一个风格化的react组件，它有一个手动滚动的下拉菜单，包括一个插入符号图标，每次我测试下拉菜单的响应性时，插入符号图标就会弹出。我将下拉列表包装在一个较大的组件中，将所有内容放在同一行，然后将图标包含在样式化的select组件中。我曾在另一个应用程序中使用过这种方法，下拉列表完全响应，图标放置没有任何问题，因此我对这个应用程序感到非常困惑。任何帮助/建议都很好

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FaCaretDown } from 'react-icons/fa'
import Table from '../core/Table'
import SubHeader from '../elements/SubHeader'
import EligibleOffer from './EligibleOffer'
import { tableDataProps, tableColumnProps } from '../../propTypes'

const BUNDLE_KEY = 'bundle'
const rowKey = 'id'

class OfferBundlesTable extends Component {
  static propTypes = {
    bundles: PropTypes.arrayOf(tableDataProps),
    columns: tableColumnProps,
    viewedOfferIds: PropTypes.arrayOf(PropTypes.string),
    onBundleSelect: PropTypes.func
  }

  static defaultProps = {
    viewedOfferIds: []
  }

  renderCell = (cell = {}) => (
    <div>
      {cell.title && <SubHeader>{cell.title}</SubHeader>}
      <p>{cell.details}</p>
    </div>
  )

  renderBundle = bundle => (
    <StyledOffer
      offer={bundle}
      onOfferSelect={this.props.onBundleSelect}
      viewed={this.props.viewedOfferIds.includes(bundle.OfferId)}
    />
  )

  getColumns = columns =>
    Object.entries(columns).reduce(
      (cols, [key, value]) => ({
        ...cols,
        [key]: {
          ...value,
          renderCell: key === BUNDLE_KEY ? this.renderBundle : this.renderCell
        }
      }),
      {}
    )

  render() {
    const { bundles = [], columns = [] } = this.props

    return (
      <div>
        <DropdownRow>
          <StyledSelect>
            <StyledStrong>SORT BY: </StyledStrong>
            <select>
              <option>Default</option>
              <option>Promo Price (High to Low)</option>
              <option>Promo Price (Low to High)</option>
              <option>Alphabetically (A-Z)</option>
              <option>Alphabetically (Z-A)</option>
              <option>Internet Tier (High to Low)</option>
              <option>Internet Tier (Low to High)</option>
            </select>
            <StyledSelectIcon size="1.5rem" />
          </StyledSelect>
          <StyledSelect>
            <StyledStrong>CONTRACT TERMS (MONTHS):</StyledStrong>
            <select>
              <option>36</option>
              <option>24</option>
              <option>12</option>
            </select>
            <StyledSelectIcon size="1.5rem" />
          </StyledSelect>
        </DropdownRow>
        <StyledTable
          rowKey={rowKey}
          rows={bundles}
          columns={this.getColumns(columns)}
        />
      </div>
    )
  }
}

const StyledTable = styled(Table)`
  th:first-child {
    width: 25%;
  }
`

const StyledOffer = styled(EligibleOffer)`
  margin-bottom: 15px;
`

const DropdownRow = styled.div`
    th:first-child {
    width: 25%;
  } 

  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px 30px 20px 10px;
  width: 60%;
  margin-left: 42%;
`

const StyledSelectIcon = styled(FaCaretDown)`
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  color: black;
  pointer-events: none;
`

const StyledSelect = styled.div`
  position: relative;
  margin-left: auto;


  select {
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    appearance: none;
    background: transparent;
    border-radius: 0;
  }
`

const StyledStrong = styled.strong`
  padding-right: 5px;
`

export default OfferBundlesTable

import React，{Component}来自“React”
从“道具类型”导入道具类型
从“样式化组件”导入样式化
从'react icons/fa'导入{FaCaretDown}
从“../core/Table”导入表
从“../elements/SubHeader”导入子标题
从“/EligibleOffer”导入EligibleOffer
从“../../propTypes”导入{tableDataProps，tableColumnProps}
常量BUNDLE\u KEY='BUNDLE'
const rowKey='id'
类OfferBundlesTable扩展组件{
静态类型={
bundles:PropTypes.arrayOf（tableDataProps），
专栏：tableColumnProps，
viewedOfferIds:PropTypes.arrayOf（PropTypes.string），
onBundleSelect:PropTypes.func
}
静态defaultProps={
viewedOfferIds:[]
}
renderCell=（单元格={}）=>(
{cell.title&&{cell.title}
{cell.details}
)
renderBundle=bundle=>(
)
getColumns=columns=>
Object.entries（columns）.reduce(
（cols，[键，值]=>({
…科尔斯，
[钥匙]：{
价值
renderCell:key==BUNDLE\u key？this.renderBundle:this.renderCell
}
}),
{}
)
render（）{
常量{bundles=[]，columns=[]}=this.props
返回(
排序方式：
违约
促销价格（从高到低）
促销价格（从低到高）
按字母顺序（A-Z）
按字母顺序（Z-A）
互联网层（从高到低）
互联网层（从低到高）
合同期限（月）：
36
24
12
)
}
}
const StyledTable=styled（表）`
第一个孩子{
宽度：25%；
}
`
const StyledOffer=styled（EligibleOffer）`
边缘底部：15px；
`
const dropdownlow=styled.div`
第一个孩子{
宽度：25%；
} 
弹性：1；
显示器：flex；
对齐项目：拉伸；
填充：20px 30px 20px 10px；
宽度：60%；
左边缘：42%；
`
const styledselectricon=styled（FaCaretDown）`
位置：绝对位置；
排名：0；
右：10px；
底部：0；
保证金：自动；
颜色：黑色；
指针事件：无；
`
const StyledSelect=styled.div`
位置：相对位置；
左边距：自动；
挑选{
填充：5px45px 5px 10px；
字号：1.2rem；
线高：1.4rem；
字号：500；
颜色：黑色；
边框：2件纯黑；
高度：36px；
外观：无；
背景：透明；
边界半径：0；
}
`
const StyledStrong=styled.strong`
右侧填充：5px；
`
导出默认的offerBundleTable

在查看了您的代码之后，我建议您选择一种替代方法，包括css中的插入符号。这使得它不可能离开select，因为它现在是select的一部分。运行下面的代码段以查看它的工作情况——当然，您希望将这些内容放入样式化组件css定义中，并将

一起删除

样式化组件定义：

const StyledSelect = styled.div`
  position: relative;
  margin-left: auto;

  select {
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    background-color: transparent;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 320 512" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
`

constyledselect=styled.div`
位置：相对位置；
左边距：自动；
挑选{
填充：5px45px 5px 10px；
字号：1.2rem；
线高：1.4rem；
字号：500；
颜色：黑色；
边框：2件纯黑；
高度：36px；
背景色：透明；
边界半径：0；
-moz外观：无；
-webkit外观：无；
外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景重复：无重复；
背景位置：右8px中心；
}
`

要在此处运行的代码段：

const StyledSelect = styled.div`
  position: relative;
  margin-left: auto;

  select {
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    background-color: transparent;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 320 512" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
`

.customselect{
填充：5px45px 5px 10px；
字号：1.2rem；
线高：1.4rem；
字号：500；
颜色：黑色；
边框：2件纯黑；
高度：36px；
背景色：透明；
边界半径：0；
-moz外观：无；
-webkit外观：无；
外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景重复：无重复；
背景位置：右8px中心；
}


方案A
方案B
备选案文C
方案D

你能通过或什么方式创建一个工作示例吗？Yeup刚刚在这里添加了一个stackblitz：并且你必须使窗口完全变大，以便插入符号在下拉列表中呈现。我想你可能需要点击“保存”。。。。我在/~/index.js（34:43）中得到了这个错误，/~/code>没有定义bundlestable的错误刚刚保存了它，现在应该开始添加

宽度：100%到定义的位，选择属性。没有任何设置它的宽度，插入符号的位置基于包装选择的div。